import { Story, Canvas, ArgsTable, Meta, SourceState } from "@storybook/blocks";
import { Toaster } from "react-hot-toast";
import { ComponentHeading, EnumTable } from "../../storybook-components";
import { STATUS_VARIANT } from "../../types";
import { Box } from "../Box";
import { Flex } from "../Flex";
import { Text } from "../Text";
import { Panel } from "../Panel";
import { Button, BUTTON_VARIANT, BUTTON_SIZE } from "../Button";
import { Toast, ToastLink, ToastMessage, showToast } from "./Toast";
import {
  ShowToastButton,
  ToastSandbox,
  ToastPreviewContainer,
  ToastPreview,
} from "./_story";

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

<ComponentHeading
  componentName="Toast"
  description="Toast is a message that appears on top of the interface to provide feedback on the outcome of an action"
  sourcePath="src/components/Toast/Toast.tsx"
  figmaLink="https://www.figma.com/design/7e31O9NtbvooasZt1qLyiq/Arrow-DS-v3?node-id=15366-2064&p=f&m=dev"
/>

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 [react-hot-toast](https://react-hot-toast.com/).

## Installation

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

## Basic usage

<Canvas withSource={SourceState.OPEN}>
  <Story name="Default">
    <ShowToastButton
      buttonLabel="Show Toast"
      toastProps={{
        title: "Toast component",
        content: "This is the Toast component",
      }}
    />
  </Story>
</Canvas>

## API

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

## Demos

### Sandbox

Adjust the Toast duration, variant and progress bar.

<Canvas withSource={SourceState.OPEN}>
  <Story name="Toast sandbox">
    <ToastSandbox
      buttonLabel="Show Toast"
      toastProps={{
        title: "Toast component",
        content: "This is the Toast component",
      }}
    />
  </Story>
</Canvas>

### 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

<Canvas withSource={SourceState.OPEN}>
  <Story name="With link">
    <ShowToastButton
      buttonLabel="Show Toast"
      toastProps={{
        title: "Toast component",
        content: <Toast.Link href="/">Access Control Policy</Toast.Link>,
      }}
    />
  </Story>
</Canvas>

#### With link list

<Canvas withSource={SourceState.OPEN}>
  <Story name="With many links">
    <ShowToastButton
      buttonLabel="Show Toast"
      toastProps={{
        title: "Toast component",
        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>
        ),
      }}
    />
  </Story>
</Canvas>

#### With message

<Canvas withSource={SourceState.OPEN}>
  <Story name="With message">
    <ShowToastButton
      buttonLabel="Show Toast"
      toastProps={{
        title: "Toast component",
        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>
        ),
      }}
    />
  </Story>
</Canvas>

#### With message, icon and variant

<Canvas withSource={SourceState.OPEN}>
  <Story name="With message, icon and variant">
    <ShowToastButton
      buttonLabel="Show Toast"
      toastProps={{
        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>
        ),
      }}
    />
  </Story>
</Canvas>

## Preview

Below is a preview of how each Toast component can be configured.

<Canvas withSource={SourceState.OPEN}>
  <Story name="Preview">
    {() => (
      <ToastPreviewContainer>
        <ToastPreview heading="Basic Toast">
          {Object.values(STATUS_VARIANT).map((variant) => (
            <Toast
              id={`basic-${variant}`}
              title="Toast component"
              content="This is the Toast component"
              variant={variant}
              duration={0}
            />
          ))}
        </ToastPreview>

        <ToastPreview heading="Toast with link">
          {Object.values(STATUS_VARIANT).map((variant) => (
            <Toast
              id={`link-${variant}`}
              title="Toast component"
              content={<Toast.Link href="/">This is the Toast component</Toast.Link>}
              variant={variant}
              duration={0}
            />
          ))}
        </ToastPreview>

        <ToastPreview heading="Toast with link list">
          {Object.values(STATUS_VARIANT).map((variant) => (
            <Toast
              id={`link-list-${variant}`}
              title="Toast component"
              content={
                <Toast.LinkList>
                  <Toast.Link href="/">This is the Toast component</Toast.Link>
                  <Toast.Link href="/">This is the Toast component</Toast.Link>
                  <Toast.Link href="/">This is the Toast component</Toast.Link>
                </Toast.LinkList>
              }
              variant={variant}
              duration={0}
            />
          ))}
        </ToastPreview>

        <ToastPreview heading="Toast with message">
          {Object.values(STATUS_VARIANT).map((variant) => (
            <Toast
              id={`message-${variant}`}
              title="Toast component"
              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>
              }
              variant={variant}
              duration={0}
            />
          ))}
        </ToastPreview>

        <ToastPreview heading="Toast with message and icon">
          {Object.values(STATUS_VARIANT).map((variant) => (
            <Toast
              id={`message-icon-${variant}`}
              title="Toast component"
              content={
                <Toast.Message withIcon>
                  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>
              }
              variant={variant}
              duration={0}
            />
          ))}
        </ToastPreview>
      </ToastPreviewContainer>
    )}
  </Story>
</Canvas>