import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { useState, useEffect } from 'react';
import Button from '../../Button';
import Snackbar from '../Snackbar';

<Meta
  title="Components/Snackbar"
  decorators={[(storyFn) => <>{storyFn()}</>]}
  component={Snackbar}
/>

# Snackbar API

The API documentation of the Snackbar React component. Learn more about the props and the CSS customization points.

## Import

```javascript
import { Snackbar } from '@useblu/ocean-react';
```

export const DinamicSnackbar = (props) => {
  const [open, setOpen] = useState(false);
  const toogle = () => setOpen(!open);
  const action = props.action ? () => console.log('') : null;
  return (
    <div>
      <Button onClick={toogle}>{open ? 'Close' : 'Open'}</Button>
      <Snackbar
        id="snackbar-playground"
        isOpen={open}
        setIsOpen={setOpen}
        {...props}
        action={action}
      />
    </div>
  );
};

## Usage

```jsx
import { Snackbar } from '@useblu/ocean-react';

const [open, setOpen] = useState(false);

return (
  <Snackbar
    id="snackbar-playground"
    isOpen={open}
    setIsOpen={setOpen}
    message="Hello, I'm a snackbar"
  />
```

## Props

<ArgsTable of="." />

## CSS

| Global class             | Description                                     |
| ------------------------ | ----------------------------------------------- |
| .ods-snackbar            | Styles applied to the root element.             |
| .ods-snackbar\_\_content | Styles applied to the element content.          |
| .ods-snackbar\_\_icon    | Styles applied to the element icon.             |
| .ods-snackbar\_\_label   | Styles applied to the element label.            |
| .ods-snackbar\_\_action  | Styles applied to the element action container. |

If that's not sufficient, you can check the [implementation of the component](https://github.com/ocean-ds/ocean-web/blob/master/packages/ocean-react/src/Snackbar/Snackbar.tsx) for more detail.

## Playground

<Canvas withToolbar>
  <Story
    name="playground"
    args={{
      type: 'info',
      message: 'Lorem ipsum dolor sit amet.',
      isOpen: false,
      setIsOpen: () => null,
      action: false,
    }}
    argTypes={{
      type: {
        options: ['info', 'positive', 'negative', 'warning'],
        control: { type: 'select' },
      },
      message: {
        control: 'text',
      },
      isOpen: {
        control: 'boolean',
      },
      action: {
        control: 'boolean',
      },
    }}
  >
    {(props) => (
      <div className="centered">
        <DinamicSnackbar
          type={props.type}
          message={props.message}
          position={props.position}
          actionLabel={props.actionLabel}
          action={props.action}
        />
      </div>
    )}
  </Story>
</Canvas>
