import { Story, Preview, Props, Meta } from "@storybook/addon-docs/blocks";
import { EnumTable } from "../../storybook-components/EnumTable";
import { STATUS_VARIANT } from "../../types";
import { Button } from "../Button";
import { Toast, ToastLink, ToastMessage, showToast } from "./Toast";

<Meta
  title="Components/Feedback/Toast"
  component={showToast}
  parameters={{
    subcomponents: { ToastLink, ToastMessage },
  }}
/>

# Toast

Toast is a message that appears on top of the interface to provide feedback on
the outcome of an action. The toast will close itself when the close button is
clicked, or after a timeout — the default is 5 seconds.

Toasts appear at the top-right of the screen. It's possible to have more than
one toast onscreen at a time.

Toast uses [toasted-notes](https://github.com/bmcmahen/toasted-notes).

```jsx
import { showToast } from "@aptible/arrow-ds";
```

<Preview>
  <Story name="Default">
    {() => {
      return (
        <Button
          onClick={() => {
            showToast({
              title: "Toast component",
              content: "This is the Toast component",
            });
          }}
        >
          Show default toast
        </Button>
      );
    }}
  </Story>
</Preview>

## Props

<Props of={showToast} />
<EnumTable enums={{ STATUS_VARIANT }} />

## Demos

### Duration option

The duration (time-on-screen) of the toast can be changed. The default is
5000ms (5 seconds).

#### With short duration

<Preview>
  <Story name="With short duration">
    {() => {
      return (
        <Button
          onClick={() => {
            showToast({
              title: "Toast component",
              content: "This is the Toast component",
              duration: 2000,
            });
          }}
        >
          Show short duration toast
        </Button>
      );
    }}
  </Story>
</Preview>

#### With long duration

<Preview>
  <Story name="With long duration">
    {() => {
      return (
        <Button
          onClick={() => {
            showToast({
              title: "Toast component",
              content: "This is the Toast component",
              duration: 10000,
            });
          }}
        >
          Show long duration toast
        </Button>
      );
    }}
  </Story>
</Preview>

### Variants

The variant prop changes the bottom border color of the toast.

#### Danger variant

<Preview>
  <Story name="Danger variant">
    {() => {
      return (
        <Button
          onClick={() => {
            showToast({
              title: "Toast component",
              content: "This is the Toast component",
              variant: STATUS_VARIANT.DANGER,
            });
          }}
        >
          Show danger toast
        </Button>
      );
    }}
  </Story>
</Preview>

#### Warning variant

<Preview>
  <Story name="Warning variant">
    {() => {
      return (
        <Button
          onClick={() => {
            showToast({
              title: "Toast component",
              content: "This is the Toast component",
              variant: STATUS_VARIANT.WARNING,
            });
          }}
        >
          Show warning toast
        </Button>
      );
    }}
  </Story>
</Preview>

#### Success variant

<Preview>
  <Story name="Success variant">
    {() => {
      return (
        <Button
          onClick={() => {
            showToast({
              title: "Toast component",
              content: "This is the Toast component",
              variant: STATUS_VARIANT.SUCCESS,
            });
          }}
        >
          Show success toast
        </Button>
      );
    }}
  </Story>
</Preview>

### Content types

While the toast content can be rendered as any valid ReactNode, the toast
includes two specific components that can help with formatting; link and
message.

#### With link

<Preview>
  <Story name="With link">
    {() => {
      return (
        <Button
          onClick={() => {
            showToast({
              title: "New control created",
              content: <Toast.Link href="/">Access Control Policy</Toast.Link>,
            });
          }}
        >
          Show toast with link
        </Button>
      );
    }}
  </Story>
</Preview>

#### With many links

<Preview>
  <Story name="With many links">
    {() => {
      return (
        <Button
          onClick={() => {
            showToast({
              title: "New control created",
              content: (
                <div>
                  <Toast.Link href="/">Access Control Policy</Toast.Link>
                  <Toast.Link href="/">Access Control Policy</Toast.Link>
                  <Toast.Link href="/">Access Control Policy</Toast.Link>
                </div>
              ),
            });
          }}
        >
          Show toast with many links
        </Button>
      );
    }}
  </Story>
</Preview>

#### With message

<Preview>
  <Story name="With message">
    {() => {
      return (
        <Button
          onClick={() => {
            showToast({
              title: "Lorem ipsum dolor sit",
              content: (
                <Toast.Message>
                  Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                  Corrupti, quo natus impedit vero repellendus magnam minima
                  debitisobcaecati eligendi? Ratione beatae voluptates id
                  laborum doloremque explicabo blanditiis esse, reiciendis
                  numquam?
                </Toast.Message>
              ),
            });
          }}
        >
          Show toast with message
        </Button>
      );
    }}
  </Story>
</Preview>

#### With message, icon and variant

<Preview>
  <Story name="With message, icon and variant">
    {() => {
      return (
        <Button
          onClick={() => {
            showToast({
              title: "Error syncing with Okta",
              variant: STATUS_VARIANT.DANGER,
              content: (
                <Toast.Message withIcon>
                  Oktakit::Unauthorized (GET
                  https://aptible-sandbox.oktapreview.com/api/v1/users: 401 -
                  Invalid token provided) Duis mauris vulputate accumsan
                  pellentesque ipsum dolor odio. At proin suspendisse ac eu
                  justo, ornare commodo felis. In etiam nisi, euismod lectus
                  luctus. Et tristique nec, amet risus, rutrum iaculis arcu
                  adipiscing nibh…
                </Toast.Message>
              ),
            });
          }}
        >
          Show toast with message variant
        </Button>
      );
    }}
  </Story>
</Preview>