import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";

import {
  Examples,
  Example,
  Note,
  Title,
  VariantsTable,
  VariantColumn,
  RowTitles,
  CustomArgsTable,
  VariantRow,
} from "@calcom/storybook/components";

import { SuccessToast, ErrorToast, WarningToast, DefaultToast } from "./";

<Meta title="UI/Toasts" component={DefaultToast} />

<Title title="Toasts" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022" />

## Definition

Toasts are used to show an action has had a impact. If a user submits a form a toast should be shown to notify the user there has been a success

## Structure

<CustomArgsTable of={DefaultToast} />

<Examples title="Toasts">
  <Example title="Default">
    <DefaultToast message="Default Toast" toastVisible={true} />
  </Example>
  <Example title="Success">
    <SuccessToast message="Success Toast" toastVisible={true} />
  </Example>
  <Example title="Warning">
    <WarningToast message="Warning Toast" toastVisible={true} />
  </Example>
  <Example title="Error">
    <ErrorToast message="Error Toast" toastVisible={true} />
  </Example>
</Examples>

## Toast Story

<Canvas>
  <Story
    name="Default"
    args={{
      message: "Default Toast",
      toastVisible: true,
    }}
    argTypes={{
      message: { control: "text" },
      toastVisible: { control: "boolean" },
    }}>
    {({ message, toastVisible }) => (
      <VariantsTable titles={["Default", "Success", "Warning", "Error"]} columnMinWidth={150}>
        <VariantRow variant="Default">
          <DefaultToast message={message} toastVisible={toastVisible} />
          <SuccessToast message={message} toastVisible={toastVisible} />
          <WarningToast message={message} toastVisible={toastVisible} />
          <ErrorToast message={message} toastVisible={toastVisible} />
        </VariantRow>
      </VariantsTable>
    )}
  </Story>
</Canvas>