import { Meta, Story, Canvas, ArgsTable, Source } from '@storybook/addon-docs'
import dedent from 'ts-dedent'
import { Button } from './Button'
import { Stack } from '../Stack'
import { Icon } from '../Icon'

import { Activity } from '../icons'

<Meta title="Controls / Button" component={Button} />

export const Template = (args) => <Button {...args}>Click here</Button>

export const Sizes = () => (
  <Stack>
    <Button type="primary" size="large">
      Large
    </Button>
    <Button type="primary" size="medium">
      Default
    </Button>
    <Button type="primary" size="small">
      Small
    </Button>
    <Button type="secondary" size="large">
      Large
    </Button>
    <Button type="secondary" size="medium">
      Default
    </Button>
    <Button type="secondary" size="small">
      Small
    </Button>
    <Button type="tertiary" size="large">
      Large
    </Button>
    <Button type="tertiary" size="medium">
      Default
    </Button>
    <Button type="tertiary" size="small">
      Small
    </Button>
  </Stack>
)

export const WithIcon = () => (
  <Stack>
    <Button type="primary">
      <Icon name="Target" size="medium" />
      Primary
    </Button>
    <Button type="secondary">
      <Icon name="Target" size="medium" />
      Secondary
    </Button>
    <Button type="tertiary" size="medium">
      <Icon name="Target" size="large" />
      Tertiary
    </Button>
  </Stack>
)

export const Icons = () => (
  <Stack>
    <Button type="icon" size="large" aria-label="View performance data">
      <Icon name="Target" size="large" />
    </Button>
    <Button type="icon" size="medium" aria-label="View performance data">
      <Icon name="Target" size="medium" />
    </Button>
    <Button type="icon" size="small" aria-label="View performance data">
      <Icon name="Target" size="medium" />
    </Button>
    <Button type="iconPrimary" size="large" aria-label="View performance data">
      <Icon name="Target" size="large" />
    </Button>
    <Button type="iconPrimary" size="medium" aria-label="View performance data">
      <Icon name="Target" size="medium" />
    </Button>
    <Button type="iconPrimary" size="small" aria-label="View performance data">
      <Icon name="Target" size="medium" />
    </Button>
  </Stack>
)

export const Loading = () => (
  <Stack>
    <Button type="primary" loading>
      Primary
    </Button>
    <Button type="secondary" loading>
      Secondary
    </Button>
    <Button type="tertiary" loading>
      Tertiary
    </Button>
  </Stack>
)

export const Disabled = () => (
  <Stack>
    <Button type="primary" disabled>
      Primary
    </Button>
    <Button type="secondary" disabled>
      Secondary
    </Button>
    <Button type="tertiary" disabled>
      Tertiary
    </Button>
  </Stack>
)

# Button

Buttons are used primarily for actions. For buttons that need to look like links, see [Link component.](/docs/controls-link--default)

Use the `aria-label`-prop when the button's visible text doesn't fully convey the meaning of the action. For example "Add" or "Remove" doesn't tell what is being added or removed. Make sure that your button is accessible by keyboard tab navigation.

<Canvas>
  <Story
    args={{
      type: 'primary',
      size: 'medium',
      disabled: false,
      loading: false
    }}
    argTypes={{
      type: {
        control: {
          type: 'radio'
        }
      },
      disabled: {
        table: {
          category: 'Modifiers'
        }
      },
      loading: {
        table: {
          category: 'Modifiers'
        }
      },
      icon: {
        table: {
          category: 'Modifiers'
        }
      }
    }}
    name="Button"
  >
    {Template.bind({})}
  </Story>
</Canvas>

<ArgsTable story="Button" />

## Sizes

<Canvas>
  <Story name="Sizes">{Sizes.bind({})}</Story>
</Canvas>

## With icon

<Canvas>
  <Story name="With icon">{WithIcon.bind({})}</Story>
</Canvas>

## Icons

<Canvas>
  <Story name="Icons">{Icons.bind({})}</Story>
</Canvas>

## Loading

<Canvas>
  <Story name="Loading">{Loading.bind({})}</Story>
</Canvas>

## Disabled

<Canvas>
  <Story name="Disabled">{Disabled.bind({})}</Story>
</Canvas>