import { Story, Canvas, ArgsTable, Meta, SourceState } from "@storybook/blocks";
import { ComponentHeading, EnumTable } from "../../storybook-components";
import { STATUS_VARIANT } from "../../types";
import { Link } from "../Link";
import { Text } from "../Text";
import { Tooltip } from "../Tooltip";
import { ICON_STYLE_PREFIX, ICON_TYPE } from "../Icon";
import { Banner } from "./Banner";

export const variants = Object.values(STATUS_VARIANT);

<Meta title="Components/Feedback/Banner" component={Banner} />

<ComponentHeading
  componentName="Banner"
  description="Used to draw attention to a message with an optional status and icon"
  sourcePath="src/components/Banner/Banner.tsx"
/>

## Installation

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

## Basic usage

<Canvas sourceState="shown">
  <Story name="Banner">
    <Banner
      title="You are inviting this person to be a Conveyor user"
      className="mb-4"
    >
      By adding this person as a Conveyor user, they’ll receive an invite to
      join your Conveyor organization. Once this user accepts their invitation,
      they’ll be able to complete workforce training, own assets, and complete
      tickets.
    </Banner>
  </Story>
</Canvas>

## API

These are the custom props that extend `BoxProps`. Full list of props <a href="#all-banner-props">below</a>.

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

## Demos

### Composition

You can use the Banner's internal components to compose a custom layout. This is
now the recommended way to use the Banner component, which will give you the
most flexibility in your consuming app.

<Canvas sourceState="shown">
  <Story name="Banner composition">
    <Banner.Root variant={STATUS_VARIANT.WARNING}>
      <Banner.Icon />
      <Banner.ContentStack>
        <Banner.Title>
          You are inviting this person to be a Conveyor user
        </Banner.Title>
        <Banner.Body>
          By adding this person as a Conveyor user, they’ll receive an invite to
          join your Conveyor organization. Once this user accepts their
          invitation, they’ll be able to complete workforce training, own
          assets, and complete tickets.
        </Banner.Body>
      </Banner.ContentStack>
      <Banner.Dismiss className="self-center" />
    </Banner.Root>
  </Story>
</Canvas>

### Status Variants

<Canvas sourceState="shown">
  <Story name="Banner Variants">
    {variants.map((variant) => (
      <Banner
        key={variant}
        title="You are inviting this person to be a Conveyor user"
        className="mb-4"
        variant={STATUS_VARIANT[variant.toUpperCase()]}
      >
        <Text>
          By adding this person as a Conveyor user, they’ll receive an invite to
          join your Conveyor organization. Once this user accepts their
          invitation, they’ll be able to complete workforce training, own
          assets, and complete tickets.
        </Text>
        <Text className="mt-1">
          <Link>Link ↗</Link>
        </Text>
      </Banner>
    ))}
  </Story>
</Canvas>

### Status Variants With Icons

Set the `withIcon` prop to `true` to show an icon next to the title. The icon is pre-defined based on the status variant.

<Canvas sourceState="shown">
  <Story name="Banners with Icons">
    {variants.map((variant) => (
      <Banner
        key={variant}
        title="You are inviting this person to be a Conveyor user"
        className="mb-4"
        variant={STATUS_VARIANT[variant.toUpperCase()]}
        withIcon
      >
        By adding this person as a Conveyor user, they’ll receive an invite to
        join your Conveyor organization. Once this user accepts their
        invitation, they’ll be able to complete workforce training, own assets,
        and complete tickets.
      </Banner>
    ))}
  </Story>
</Canvas>

Instead of using `withIcon` and the pre-defined icon, you can set a custom icon using the `icon` prop paired with the optional `iconPrefix` prop.

<Canvas sourceState="shown">
  <Story name="Banners with Custom Icons">
    {variants.map((variant) => (
      <Banner
        key={variant}
        title="You are inviting this person to be a Conveyor user"
        className="mb-4"
        variant={STATUS_VARIANT[variant.toUpperCase()]}
        icon={ICON_TYPE.STAR}
        iconPrefix={ICON_STYLE_PREFIX.SOLID}
      >
        By adding this person as a Conveyor user, they’ll receive an invite to
        join your Conveyor organization. Once this user accepts their
        invitation, they’ll be able to complete workforce training, own assets,
        and complete tickets.
      </Banner>
    ))}
  </Story>
</Canvas>

### No Title

<Canvas sourceState="shown">
  <Story name="Banner without title">
    <Banner>
      By adding this person as a Conveyor user, they’ll receive an invite to
      join your Conveyor organization. Once this user accepts their invitation,
      they’ll be able to complete workforce training, own assets, and complete
      tickets.
    </Banner>
  </Story>
</Canvas>

### No Title + Icon

<Canvas sourceState="shown">
  <Story name="Banner no title plus icon">
    <Banner variant={STATUS_VARIANT.DANGER} withIcon className="inline-flex">
      Error: E0000011 (Invalid token provided)
      <Link href="/" className="ml-2">
        Help
      </Link>
    </Banner>
  </Story>
</Canvas>

### As a Tooltip

<Canvas sourceState="shown">
  <Story name="As a Tooltip">
    <Tooltip
      referenceElement={
        <Banner
          variant={STATUS_VARIANT.DANGER}
          withIcon
          className="inline-flex"
        >
          Error: E0000011 (Invalid token provided)
        </Banner>
      }
    >
      Error: E0000011 (Invalid token provided)
    </Tooltip>
  </Story>
</Canvas>