import { action } from '@storybook/addon-actions';
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { BrowserRouter, Link } from 'react-router-dom';
import { Alert } from '../Alert/Alert';
import { Button } from './Button';
import { Box } from '../Box/Box';

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

# Button

Buttons are used as triggers for actions.
They are used in forms, toolbars, modal dialogs and as stand-alone action triggers.
Actions almost always occur on the same page.

<Canvas isExpanded>
  <Story
    name="Default"
    parameters={{
      design: {
        type: 'figma',
        url: 'https://www.figma.com/file/k1kOsplTGXvSSMQQCzhCND/Palmetto-Design-System?type=design&node-id=4032%3A11&mode=design&t=ht1ehQlCvlWB3tJ2-1',
      },
    }}
  >
    <Button onClick={action('clicked')}>Button</Button>
  </Story>
</Canvas>

## Props

<ArgsTable of={Button} />

## Variants & Tone

The `variant` prop determines the visual weight, while `tone` indicates the intent of the action the button performs.

<Canvas withSource="open">
  <Story
    name="Variants & Tone"
    parameters={{
      design: {
        type: 'figma',
        url: 'https://www.figma.com/file/k1kOsplTGXvSSMQQCzhCND/Palmetto-Design-System?type=design&node-id=4032%3A11&mode=design&t=ht1ehQlCvlWB3tJ2-1',
      },
    }}
  >
    <Box gap="md">
      <Box gap="sm" direction="row" alignItems="flex-start">
        <Button variant="primary">Primary</Button>
        <Button variant="secondary">Secondary</Button>
        <Button variant="tertiary">Tertiary</Button>
      </Box>
      <Box gap="sm" direction="row" alignItems="flex-start">
        <Button variant="primary" tone="neutral">
          Primary Neutral
        </Button>
        <Button variant="secondary" tone="neutral">
          Secondary Neutral
        </Button>
        <Button variant="tertiary" tone="neutral">
          Tertiary Neutral
        </Button>
      </Box>
      <Box gap="sm" direction="row" alignItems="flex-start">
        <Button variant="primary" tone="danger">
          Primary Danger
        </Button>
        <Button variant="secondary" tone="danger">
          Secondary Danger
        </Button>
        <Button variant="tertiary" tone="danger">
          Tertiary Danger
        </Button>
      </Box>
    </Box>
  </Story>
</Canvas>

## Sizes

Set the size of the button to `xs`, `sm`, `md` or `lg`. `md` is the default size. The button also takes a `ResponsiveProp` object
so it can have different sizes at different breakpoints.

<Canvas withSource="open">
  <Story
    name="Size"
    parameters={{
      design: {
        type: 'figma',
        url: 'https://www.figma.com/file/k1kOsplTGXvSSMQQCzhCND/Palmetto-Design-System?type=design&node-id=4032%3A11&mode=design&t=ht1ehQlCvlWB3tJ2-1',
      },
    }}
  >
    <Box gap="sm" direction="row" alignItems="flex-start">
      <Button size="xs" tone="neutral">
        xs
      </Button>
      <Button size="sm" tone="neutral">
        sm
      </Button>
      <Button size="md" tone="neutral">
        md
      </Button>
      <Button size="lg" tone="neutral">
        lg
      </Button>
      <Button
        size={{
          base: 'xs',
          tablet: 'sm',
          desktop: 'md',
          hd: 'lg',
        }}
        variant="primary"
        tone="neutral"
      >
        responsive
      </Button>
    </Box>
  </Story>
</Canvas>

## Full Width

Use the `fullWidth` prop to allow the button to grow to its container's full width.

<Canvas withSource="open">
  <Story name="Full Width">
    <Button variant="primary" tone="neutral" fullWidth>
      Full Width
    </Button>
  </Story>
</Canvas>

## Icons

Add an icon to the left or right inside the Button using the `iconPrefix` and `iconSuffix` props respectively.

<Canvas withSource="open">
  <Story name="With Icons">
    <Box direction="row" gap="xs">
      <Button variant="primary" tone="neutral" iconPrefix="mail">
        Email
      </Button>
      <Button variant="secondary" tone="neutral" iconSuffix="chat">
        Chat Now
      </Button>
    </Box>
  </Story>
</Canvas>

## Icon Button

Use a combination of `tertiary-*` variant and a named icon to make an icon a button. Be sure to include an `aria-label` for screen readers to know what action the button will perform when pressed.

<Canvas withSource="open">
  <Story name="Icon Button">
    <Button variant="tertiary" iconPrefix="add" aria-label="add" />
    <Button
      variant="tertiary"
      tone="neutral"
      iconPrefix="dots"
      aria-label="open menu"
    />
    <Button
      variant="tertiary"
      tone="danger"
      iconPrefix="trash"
      aria-label="remove"
    />
  </Story>
</Canvas>

## Loading

Setting the `isLoading` prop to true will replace the button text with loading indicator and disable the button to prevent unintended submissions.
The width of the button will remain consistent to prevent content from shifting.

<Canvas withSource="open">
  <Story name="Loading">
    <Box direction="row" gap="sm">
      <Button isLoading>Primary Loading</Button>
      <Button variant="secondary" isLoading>
        Secondary Loading
      </Button>
      <Button variant="tertiary" isLoading>
        Tertiary Loading
      </Button>
    </Box>
  </Story>
</Canvas>

## Disabled

Use for actions that aren’t currently available, such as immediately after a form submission.
The interface should make it clear why the button is disabled and what needs to be done to enable it.

<Canvas withSource="open">
  <Story name="Disabled">
    <Box direction="row" gap="sm">
      <Button variant="primary" tone="neutral" isDisabled>
        Primary Disabled
      </Button>
      <Button variant="secondary" tone="neutral" isDisabled>
        Secondary Disabled
      </Button>
      <Button variant="tertiary" tone="neutral" isDisabled>
        Tertiary Disabled
      </Button>
    </Box>
  </Story>
</Canvas>

## Event Callbacks

Callback functions can be passed to `onClick`, `onBlur`, and `onFocus` events.

<Canvas withSource="open">
  <Story name="Event Callbacks">
    <Button
      onBlur={action('blur')}
      onClick={action('click')}
      onFocus={action('focus')}
    >
      click, focus, blur events
    </Button>
  </Story>
</Canvas>

## As an Anchor

You can render an anchor tag with the style of a button by using the `as` prop. You
can render buttons as one of `button`, `a`, and `input`.

<Canvas>
  <Story name="As an Anchor">
    <Button as="a" href="https://ux.palmetto.com" target="_blank">
      I'm an anchor tag
    </Button>
  </Story>
</Canvas>

## Wrapped in a React Router Link

<Canvas>
  <Story
    name="React Router Link"
    decorators={[
      Story => (
        <BrowserRouter>
          <Story />
        </BrowserRouter>
      ),
    ]}
  >
    <Link to="/" as="a" component={Button}>
      React Router Link
    </Link>
    <Box margin="md 0 0 0">
      <Alert
        hasIcon
        message="NOTE: this link will not work in storybook but the code example is correct if used in a React application with react-router-dom."
        variant="warning"
      />
    </Box>
  </Story>
</Canvas>
