import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
import AlertBanner from "../AlertBanner";
import AlertBannerText from "../AlertBannerText/AlertBannerText";
import AlertBannerLink from "../AlertBannerLink/AlertBannerLink";
import AlertBannerButton from "../AlertBannerButton/AlertBannerButton";
import { ComponentRules, Link, RelatedComponents, UsageGuidelines } from "../../../storybook/components";
import { createStoryMetaSettings } from "../../../storybook/functions/createStoryMetaSettings";
import {
  ATTENTION_BOX,
  TOAST,
  TOOLTIP
} from "../../../storybook/components/related-components/component-description-map";
import "./alertBanner.stories.scss";

export const metaSettings = createStoryMetaSettings({
  component: AlertBanner,
  enumPropNamesArray: ["backgroundColor"]
});

<Meta
  title="Feedback/AlertBanner - (In progress)"
  component={AlertBanner}
  argTypes={metaSettings.argTypes}
  decorators={metaSettings.decorators}
/>

<!--- Component template -->

export const alertBannerTemplate = args => {
  return (
    <AlertBanner {...args}>
      <AlertBannerText text={args.bannerText} />
      <AlertBannerLink text={args.linkText} href="https://l3vels.xyz" />
    </AlertBanner>
  );
};

<!--- Component documentation -->

# Alert Banner

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

Alert banners show pressing and high-signal messages, such as system alerts. They are meant to be noticed and prompt users to take action.

<Canvas>
  <Story
    name="Overview"
    args={{
      bannerText: "Alert banner message",
      linkText: "this is a CTA"
    }}
  >
    {alertBannerTemplate.bind({})}
  </Story>
</Canvas>

## Props

<ArgsTable story="Overview" />

## Usage

<UsageGuidelines
  guidelines={[
    "Alert banners should have call for action and an option to dismiss.",
    "Don't include more than one call to action in an alert banner.",
    "Place the banner on the top of the screen, and push all other content below it."
  ]}
/>

<Tip>
  Alert banners should be reserved only for high-signal, system-level alert messages. For in-app notifications use a{" "}
  <Link href="/?path=/docs/feedback-toast--overview" size={Link.sizes.SMALL} withoutSpacing>
    Toast.
  </Link>
</Tip>

## Variants

### Types

There are four types of alert banners: primary, negative, positive, and inverted.

<Canvas>
  <Story name="Types">
    <div className="l3-storybook-alert-banner_column-wrapper l3-storybook-alert-banner_big-container">
      <AlertBanner backgroundColor={AlertBanner.backgroundColors.NORMAL}>
        <AlertBannerText text="Alert banner message" />
        <AlertBannerLink text="this is a CTA" href="https://l3vels.xyz" />
      </AlertBanner>
      <AlertBanner backgroundColor={AlertBanner.backgroundColors.NEGATIVE}>
        <AlertBannerText text="Alert banner message" />
        <AlertBannerLink text="this is a CTA" href="https://l3vels.xyz" />
      </AlertBanner>
      <AlertBanner backgroundColor={AlertBanner.backgroundColors.POSITIVE}>
        <AlertBannerText text="Alert banner message" />
        <AlertBannerLink text="this is a CTA" href="https://l3vels.xyz" />
      </AlertBanner>
      <AlertBanner backgroundColor={AlertBanner.backgroundColors.WARNING}>
        <AlertBannerText text="Alert banner message" />
        <AlertBannerLink text="this is a CTA" href="https://l3vels.xyz" />
      </AlertBanner>
    </div>
  </Story>
</Canvas>

### Alert Banner with button

<Canvas>
  <Story name="Alert Banner with button">
    <AlertBanner className="l3-storybook-alert-banner_big-container">
      <AlertBannerText text="Lorem ipsum dolor sit amet" />
      <AlertBannerButton>Lorem Ipsum</AlertBannerButton>
    </AlertBanner>
  </Story>
</Canvas>

### Alert Banner with link

<Canvas>
  <Story name="Alert Banner with link">
    <AlertBanner className="l3-storybook-alert-banner_big-container">
      <AlertBannerText text="Alert banner message" />
      <AlertBannerLink text="this is a CTA" href="https://l3vels.xyz" />
    </AlertBanner>
  </Story>
</Canvas>

## Do’s and Don’ts

<ComponentRules
  rules={[
    {
      positive: {
        component: (
          <AlertBanner className="l3-storybook-alert-banner_medium-container">
            <AlertBannerText text="Join us at Elevate!" />
            <AlertBannerLink text="RSVP now" href="https://l3vels.xyz" />
          </AlertBanner>
        ),
        description: "Use banners for system messages, background processes, and general updates."
      },
      negative: {
        component: (
          <AlertBanner className="l3-storybook-alert-banner_medium-container">
            <AlertBannerText text="We successfully archived 1 item" />
          </AlertBanner>
        ),
        description: (
          <>
            Don’t use banners for notifying a user of an action they have taken. Instead, provide visual feedback with a{" "}
            <Link href="/?path=/docs/feedback-toast--overview" withoutSpacing>
              Toast.
            </Link>
          </>
        )
      }
    },
    {
      positive: {
        component: (
          <AlertBanner
            className="l3-storybook-alert-banner_medium-container"
            backgroundColor={AlertBanner.backgroundColors.NEGATIVE}
          >
            <AlertBannerText text="No connection" />
            <AlertBannerLink text="Learn more" href="https://l3vels.xyz" />
            <AlertBannerButton>Try again</AlertBannerButton>
          </AlertBanner>
        ),
        description: "If two actions are needed, use two different call to acitons."
      },
      negative: {
        component: (
          <div className="l3-storybook-alert-banner_column-wrapper">
            <AlertBanner
              backgroundColor={AlertBanner.backgroundColors.NEGATIVE}
              className="l3-storybook-alert-banner_medium-container"
            >
              <AlertBannerText text="No connection" />
              <AlertBannerLink text="Learn more" href="https://l3vels.xyz" />
              <AlertBannerLink text="Try again" href="https://l3vels.xyz" />
            </AlertBanner>
            <AlertBanner
              backgroundColor={AlertBanner.backgroundColors.NEGATIVE}
              className="l3-storybook-alert-banner_medium-container"
            >
              <AlertBannerText text="No connection" />
              <AlertBannerButton>Learn more</AlertBannerButton>
              <AlertBannerButton>Try again</AlertBannerButton>
            </AlertBanner>
          </div>
        ),
        description: "Don't include more than one action in an alert banner with the same type."
      }
    },
    {
      positive: {
        component: (
          <AlertBanner
            backgroundColor={AlertBanner.backgroundColors.DARK}
            className="l3-storybook-alert-banner_medium-container"
          >
            <AlertBannerText text="Join us at Elevate!" />
            <AlertBannerLink text="RSVP now" href="https://l3vels.xyz" />
          </AlertBanner>
        ),
        description: "Use only the 4 color types: primary, negative, positive, and inverted."
      },
      negative: {
        component: (
          <AlertBanner className="l3-storybook-alert-banner_medium-container l3-storybook-alert-banner_pink">
            <AlertBannerText text="Join us at Elevate!" />
            <AlertBannerLink text="RSVP now" href="https://l3vels.xyz" />
          </AlertBanner>
        ),
        description: "Don’t choose other colors for alert banners. Keep it consistent."
      }
    }
  ]}
/>

## Use cases and examples

### Alert banner as an announcement

Use when you’d like to notify about an event or cross-company announcment.

<Canvas>
  <Story name="Alert banner as an announcement">
    <AlertBanner
      backgroundColor={AlertBanner.backgroundColors.DARK}
      className="l3-storybook-alert-banner_big-container"
    >
      <AlertBannerText text="Join us at Elevate 2022" />
      <AlertBannerLink text="RSVP now" href="https://l3vels.xyz" />
    </AlertBanner>
  </Story>
</Canvas>

### Alert banner as an opportunity to upgrade

Use to show a trial user the number of remaining free days to use the platform.

<Canvas>
  <Story name="Alert banner as an opportunity to upgrade">
    <AlertBanner className="l3-storybook-alert-banner_big-container">
      <AlertBannerText text="7 days left on your l3vels CRM trial" />
      <AlertBannerLink text="Upgrade now" href="https://l3vels.xyz" />
    </AlertBanner>
  </Story>
</Canvas>

### Overflow text

In case that there’s not enough space for the conent, use an ellipses (...).

<Canvas>
  <Story name="Overflow text">
    <AlertBanner className="l3-storybook-alert-banner_small-container">
      <AlertBannerText text="This is a really long alert..." />
      <AlertBannerLink text="Call to action" href="https://l3vels.xyz" />
    </AlertBanner>
  </Story>
</Canvas>

## Related components

<RelatedComponents componentsNames={[TOAST, ATTENTION_BOX, TOOLTIP]} />
