import { Story, ArgsTable, Canvas, Meta } from "@storybook/addon-docs/blocks";
import * as stories from "./toast.stories.js";

import Toast from "./";

<Meta
  title="Components/Toast"
  component={Toast}
  parameters={{
    source: {
      code: stories.basic,
    },
  }}
  argTypes={{
    timeout: {
      description: `Time (in milliseconds) for showing your toast. Setting in \`0\` let you to show toast constantly until clicking on it`,
    },
    data: { description: "Any components or data inside a toast" },
    withCross: {
      description: `If \`false\`: toast disappeared after clicking on any area of toast. If \`true\`: toast disappeared after clicking on close button`,
    },
  }}
/>

# Toast

Toast allow you to add notification to your page with ease.

`<Toast />` is container for your notification. Remember to render the `<Toast />` _once_ in your application tree. If you can't figure out where to put it, rendering it in the application root would be the best bet.

`toastr` is a function for showing notifications.

<Canvas>
  <Story story={stories.basic} name="Default" />
</Canvas>

<ArgsTable story="Default" />

<Canvas>
  <Story story={stories.all} name="All" />
</Canvas>

### Usage

```js
import Toast from "@appserver/components/toast";
import toastr from "@appserver/components/toast/toastr";
```

```jsx
<Toast />
<button onClick={() => toastr.success('Some text for toast', 'Some text for title', true)}>Click</button>
```

or

```jsx
<Toast>{toastr.success("Some text for toast")}</Toast>
```

You can use simple html tags. For this action you should wrap your message by empty tags:

```jsx
<Toast />
<button onClick={() => toastr.success(<>You have <b>bold text</b></>)}>Click</button>
```

If your notification include only text in html tags or data in JSX tags, you can omit empty tags:

```jsx
<Toast />
<button onClick={() => toastr.success(<b>Bold text</b>)}>Click</button>
```

#### Other Options

```js
<Toast/>
    // Remove all toasts in your page programmatically
<button onClick = {()=> { toastr.clear() }}>Clear</button>
```