import { useCallback, useMemo, useState } from "react";
import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
import Toast from "../Toast";
import { createComponentTemplate, createStoryMetaSettings } from "../../../storybook";
import Button from "../../Button/Button";
import { Link, RelatedComponents, Tip, UsageGuidelines } from "../../../storybook/components";
import {
  ALERT_BANNER,
  ATTENTION_BOX,
  TOOLTIP
} from "../../../storybook/components/related-components/component-description-map";
import { Delete, Robot, Vector, Close } from "../../Icon/Icons";
import {
  femaleIcon,
  guest,
  home,
  maleIcon,
  minus,
  owner,
  person1,
  person2,
  person3,
  person4,
  person5,
  person6,
  person7,
  avatar1,
  avatar2,
  avatar3,
  avatar4
} from "./assets";
import "./toast.stories.scss";

export const metaSettings = createStoryMetaSettings({
  component: Toast,
  enumPropNamesArray: ["type"],
  iconPropNamesArray: ["icon"]
});

<Meta title="Feedback/Toast" component={Toast} argTypes={metaSettings.argTypes} decorators={metaSettings.decorators} />

<!--- Component template -->

export const toastTemplate = createComponentTemplate(Toast);

<!--- Component documentation -->

# Toast

- [Overview](#overview)
- [Props](#props)
- [Usage](#usage)
- [Variants](#variants)
- [Do’s and don’ts](#dos-and-donts)
- [Use cases and examples](#use-cases-and-examples)
- [Related components](#related-components)
- [Feedback](#feedback)

## Overview

A toast notification is a message object that presents timely information, including confirmation of actions, alerts, and errors.

<Canvas>
  <Story
    name="Overview"
    args={{
      children: "General message toast",
      open: true,
      className: "l3-storybook-toast_wrapper",
      actions: [{ type: Toast.actionTypes.BUTTON, content: "Label" }]
    }}
  >
    {toastTemplate.bind({})}
  </Story>
</Canvas>

## Props

<ArgsTable story="Overview" />

## Usage

<UsageGuidelines
  guidelines={[
    "Use toast notifications immediately after a specific event such as a user action that does not relate to an object on the page. Toast used as a feedback loop to a user’s action.",
    "Toasts should appear one at a time, and only disappear when no longer required.",
    "Always be clear, concise and, where possible, give follow up actions to allow the user to become more informed or resolve the issue.",
    "Always provide an action button or option to undo.",
    "Toast should overlay permanent UI elements without blocking important actions."
  ]}
/>

<Tip title="Check yourself">
  Need to inform the user about a system’s action? Use an{" "}
  <Link href="/?path=/docs/feedback-alertbanner--overview" size={Link.sizes.SMALL} withoutSpacing>
    Alert banner
  </Link>{" "}
  instead.
</Tip>

## Variants

### Normal simple

<Canvas>
  <Story name="Normal simple">
    {() => {
      const actions = useMemo(() => [{ type: Toast.actionTypes.BUTTON, content: "Label" }], []);
      return (
        <div
          style={{
            display: "flex",
            flexDirection: "row",
            justifyContent: "center",
            alignItems: "center",
            gap: "20px",
            marginTop: "15px"
          }}
        >
          <Toast
            open
            autoHideDuration={5000}
            type={Toast.types.NORMAL}
            label="Label"
            paragraph="Paragraph"
            className="l3-storybook-toast_wrapper"
            hideIcon={true}
            closeable={false}
          />
          <Toast
            open
            autoHideDuration={5000}
            type={Toast.types.NORMAL}
            className="l3-storybook-toast_wrapper"
            paragraph="Paragraph"
            label="Label"
            closeable={true}
            hideIcon={true}
            closeIcon={Close}
            iconClassName="icon-story-custom--close-icon-white"
          />
          <Toast
            open
            autoHideDuration={5000}
            type={Toast.types.NORMAL}
            hideIcon={true}
            actions={actions}
            className="l3-storybook-toast_wrapper"
            closeable={false}
          />
        </div>
      );
    }}
  </Story>
</Canvas>
