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

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

# WebNotification API

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

## Import

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

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

## Usage

```jsx
import WebNotification from '@useblu/ocean-react';

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

return (
  <WebNotification
    isOpen={open}
    setIsOpen={setOpen}
    description="Hello, I'm a web notification!!"
    title="Title"
    type="info"
  />
);
```

## Props

<ArgsTable of="." />

## CSS

| Global class                         | Description                                     |
| ------------------------------------ | ----------------------------------------------- |
| .ods-web-notification                | Styles applied to the root element.             |
| .ods-web-notification\_\_description | Styles applied to the description text          |
| .ods-web-notification\_\_title       | Styles applied to the title text                |
| .ods-web-notification\_\_content     | Styles applied to the element content.          |
| .ods-web-notification\_\_label       | Styles applied to the element label.            |
| .ods-web-notification\_\_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/WebNotification/WebNotification.tsx) for more detail.

## Playground

<Canvas withToolbar>
  <Story
    name="playground"
    args={{
      type: 'info',
      description: 'Description',
      title: 'Title',
      isOpen: false,
      action: false,
      actionLabel: 'Action',
      position: 'bottom-right',
    }}
    argTypes={{
      type: {
        options: ['info', 'positive', 'warning'],
        control: { type: 'select' },
      },
      title: {
        control: 'text',
      },
      description: {
        control: 'text',
      },
      isOpen: {
        control: 'boolean',
      },
      action: {
        control: 'boolean',
      },
      actionLabel: {
        control: 'text',
      },
      position: {
        options: ['bottom-left', 'bottom-right'],
        control: { type: 'radio' },
      },
    }}
  >
    {(props) => (
      <div className="centered">
        <DinamicWebNotification
          type={props.type}
          description={props.description}
          title={props.title}
          position={props.position}
          actionLabel={props.actionLabel}
          action={props.action}
        />{' '}
      </div>
    )}
  </Story>
</Canvas>
