import { useState } from 'react';
import { action } from '@storybook/addon-actions';
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { Alert } from './Alert';
import { Heading } from '../Heading/Heading';
import { Button } from '../Button/Button';

<Meta title="Components/Alert/Overview" component={Alert} />

# Alert

Use alerts to display feedback for users about specific actions, or states of an application.

<Canvas isExpanded>
  <Alert
    title="Contact Created"
    message="The contact was saved on December 3, 2020 at 6:10pm PDT"
    variant="success"
    isClosable
    hasIcon
  />
</Canvas>

## Props

<ArgsTable of={Alert} />

## Variants

Alerts come in different variants based on the kind of feedback being delivered to the user. Additionally, a combination of icon, title, and message can be used depending on your content needs.

<Canvas>
  <Story
    name="Variants"
    parameters={{
      design: {
        type: 'figma',
        url: 'https://www.figma.com/file/k1kOsplTGXvSSMQQCzhCND/Palmetto-Design-System?node-id=1931%3A24889',
      },
    }}
  >
    {() => {
      const variants = ['default', 'info', 'success', 'warning', 'danger'];
      const message = variant => `
        This is a ${variant} alert. It also has longer text to see what these alerts
        can look like when broken into multiple lines. This one will definitely
        break into multiple lines in most standard screen resolutions.
      `;
      return (
        <>
          {variants.map(variant => (
            <Alert
              message={message(variant)}
              key={variant}
              title={variant.charAt(0).toUpperCase() + variant.slice(1)}
              variant={variant}
              hasIcon
              className="m-bottom-md"
            />
          ))}
        </>
      );
    }}
  </Story>
</Canvas>

## With Custom JSX in the message

The alert can display any custom JSX that is passed into the `message` prop, not just a string variant.

<Canvas>
  <Story name="With Custom JSX Message">
    {() => {
      const myMessage = (
        <>
          <Heading as="h3" size="xl">
            Oops!
          </Heading>
          <p>Looks like something went wrong.</p>
          <Button size="sm" className="m-top-sm">
            Click this button to fix it!
          </Button>
        </>
      );
      return <Alert message={myMessage} variant="danger" />;
    }}
  </Story>
</Canvas>

## With Render Function

If you prefer to pass a render function to the alert rather than a static `ReactNode`, you can pass a function
that returns a `ReactNode` to the `render` prop.

IMPORTANT: The `render` prop, will supersede the `message` prop, if both are present.

<Canvas>
  <Story name="With Render Function">
    {() => {
      const renderMyMessage = () => (
        <>
          <Heading as="h3" size="xl">
            Oops!
          </Heading>
          <p>
            Looks like something went wrong. But I'm using a render function.
          </p>
          <Button size="sm" className="m-top-sm">
            Click this button to fix it!
          </Button>
        </>
      );
      return <Alert render={renderMyMessage} variant="danger" />;
    }}
  </Story>
</Canvas>

## Closable

The alert can be made closable by passing the `isClosable` prop. Note that this only controls the presence of
the close icon, but closing actually happens programmatically with a callback passed to the `onClose` prop.
If you need custom close text, pass it in the `closeText` prop.

<Canvas>
  <Story name="Closable">
    {() => {
      const [isAlertTwoShowing, setAlertTwoShowing] = useState(true);
      const [isAlertThreeShowing, setAlertThreeShowing] = useState(true);
      return (
        <>
          <Alert
            title="Won't Close"
            message="Closable, but with no onClose callback so nothing happens when clicked."
            variant="warning"
            isClosable
            className="m-bottom-md"
          />
          {isAlertTwoShowing ? (
            <Alert
              title="Closable"
              message="This one works!"
              variant="info"
              isClosable
              onClose={() => setAlertTwoShowing(false)}
              className="m-bottom-md"
            />
          ) : (
            <div className="m-bottom-md">
              <Button onClick={() => setAlertTwoShowing(true)} size="sm">
                Give me the second alert back!
              </Button>
            </div>
          )}
          {isAlertThreeShowing ? (
            <Alert
              message="With custom close text!"
              variant="info"
              isClosable
              onClose={() => setAlertThreeShowing(false)}
              closeText="Close me!"
            />
          ) : (
            <div className="m-bottom-md">
              <Button onClick={() => setAlertThreeShowing(true)} size="sm">
                Give me the third alert back!
              </Button>
            </div>
          )}
        </>
      );
    }}
  </Story>
</Canvas>

## Compact

Renders a version of the banner with less padding.

<Canvas>
  <Story name="Compact">
    <Alert
      message="Compact Alerts have less padding"
      variant="info"
      isCompact
    />
    ;
  </Story>
</Canvas>
