import {ArgsTable, Meta, Story, Canvas} from '@storybook/addon-docs';
import Select, {SIZE} from './Select';
import {StoryVariantTable} from '../../docs/utils';
import PageHeader from 'blocks/PageHeader';
import hex from '../colors/hex';
import Headline from '../text/Headline';

<Meta
  title="Components/form/Select"
  component={Select}
  argTypes={{
    options: {
      control: {
        disable: true,
      },
    },
  }}
  args={{
    options: [
      {
        value: '1',
        text: 'option 1',
      },
      {
        value: '2',
        text: 'option 2',
      },
    ],
    fullWidth: true,
  }}
/>

<PageHeader>Select</PageHeader>

- [Stories](#stories)

## Overview

<Canvas>
  <Story name="Default">{args => <Select {...args} />}</Story>
</Canvas>

<ArgsTable story="Default" />

## Stories

### Sizes

<Canvas>
  <Story name="Sizes">
    {args => (
      <StoryVariantTable>
        <tbody>
          {Object.values(SIZE).map(size => (
            <tr key={size}>
              <td>
                <Headline
                  extraBold
                  transform="uppercase"
                  as="span"
                  color="text-gray-40"
                  size="medium"
                >
                  {size}
                </Headline>
              </td>
              <td>
                <Select {...args} size={size} />
              </td>
            </tr>
          ))}
        </tbody>
      </StoryVariantTable>
    )}
  </Story>
</Canvas>

### Styles and States

<Canvas>
  <Story name="Styles and States">
    {args => (
      <StoryVariantTable>
        <tbody>
          <tr>
            <td />
            <td>
              <Headline
                extraBold
                transform="uppercase"
                as="span"
                color="text-gray-40"
                size="medium"
              >
                neutral state
              </Headline>
            </td>
            <td>
              <Headline
                extraBold
                transform="uppercase"
                as="span"
                color="text-gray-40"
                size="medium"
              >
                selected state
              </Headline>
            </td>
            <td>
              <Headline
                extraBold
                transform="uppercase"
                as="span"
                color="text-gray-40"
                size="medium"
              >
                disabled state
              </Headline>
            </td>
          </tr>
          <tr>
            <td>
              <Headline
                extraBold
                transform="uppercase"
                as="span"
                color="text-gray-40"
                size="medium"
              >
                default
              </Headline>
            </td>
            <td>
              <Select {...args} />
            </td>
            <td>
              <Select {...args} value="1" />
            </td>
            <td>
              <Select {...args} disabled />
            </td>
          </tr>
          <tr style={{backgroundColor: hex.black}}>
            <td>
              <Headline
                extraBold
                transform="uppercase"
                as="span"
                color="text-white"
                size="medium"
              >
                white
              </Headline>
            </td>
            <td>
              <Select {...args} color="white" />
            </td>
            <td>
              <Select {...args} color="white" value="1" />
            </td>
            <td>
              <Select {...args} color="white" disabled />
            </td>
          </tr>
          <tr>
            <td>
              <Headline
                extraBold
                transform="uppercase"
                as="span"
                color="text-gray-40"
                size="medium"
              >
                valid
              </Headline>
            </td>
            <td>
              <Select {...args} valid />
            </td>
            <td>
              <Select {...args} valid value="1" />
            </td>
            <td>
              <Select {...args} valid disabled />
            </td>
          </tr>
          <tr>
            <td>
              <Headline
                extraBold
                transform="uppercase"
                as="span"
                color="text-gray-40"
                size="medium"
              >
                invalid
              </Headline>
            </td>
            <td>
              <Select {...args} invalid />
            </td>
            <td>
              <Select {...args} invalid value="1" />
            </td>
            <td>
              <Select {...args} invalid disabled />
            </td>
          </tr>
          <tr>
            <td>
              <Headline
                extraBold
                transform="uppercase"
                as="span"
                color="text-gray-40"
                size="medium"
              >
                capitalized
              </Headline>
            </td>
            <td>
              <Select {...args} capitalized />
            </td>
            <td>
              <Select {...args} capitalized value="1" />
            </td>
            <td>
              <Select {...args} capitalized disabled />
            </td>
          </tr>
        </tbody>
      </StoryVariantTable>
    )}
  </Story>
</Canvas>

### Full width

<Canvas>
  <Story name="Full width">{args => <Select {...args} fullWidth />}</Story>
</Canvas>

### Capitalized

<Canvas>
  <Story name="Capitalized">{args => <Select {...args} capitalized />}</Story>
</Canvas>