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

<Meta
  title="Components/form/Textarea"
  component={Textarea}
  argTypes={{
    type: {
      control: {
        disable: true,
      },
      table: {
        defaultValue: {
          summary: 'textarea',
        },
      },
    },
    value: {
      control: {
        type: 'text',
      },
    },
    errorMessage: {
      control: {
        type: 'text',
      },
    },
    color: {
      table: {
        defaultValue: {
          summary: TEXTAREA_COLOR.DEFAULT,
        },
      },
    },
    size: {
      control: {
        type: 'select',
      },
      table: {
        defaultValue: {
          summary: SIZE.NORMAL,
        },
      },
    },
  }}
  args={{
    value: '',
    placeholder: 'placeholder',
  }}
/>

<PageHeader>Textarea</PageHeader>

- [Stories](#stories)

## Overview

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

<ArgsTable story="Default" />

## Stories

### Colors

<Canvas>
  <Story name="Colors">
    {args => (
      <div>
        {Object.values(TEXTAREA_COLOR).map(color => (
          <StoryVariant label={`color - ${color}`} key={color}>
            {color === 'WHITE' ? (
              <div className="sg-story-variant-dark-box">
                <Textarea {...args} color={color} />
              </div>
            ) : (
              <Textarea {...args} color={color} />
            )}
          </StoryVariant>
        ))}
      </div>
    )}
  </Story>
</Canvas>

### Sizes

<Canvas>
  <Story name="Sizes">
    {args => (
      <div>
        {Object.values(SIZE).map(size => (
          <StoryVariant label={`size - ${size}`} key={size}>
            <Textarea {...args} size={size} />
          </StoryVariant>
        ))}
      </div>
    )}
  </Story>
</Canvas>

### Full Width

<Canvas>
  <Story name="Full Width">
    {args => (
      <StoryVariantBorderBox>
        <Textarea {...args} fullWidth />
      </StoryVariantBorderBox>
    )}
  </Story>
</Canvas>

### Simple

<Canvas>
  <Story name="Simple">{args => <Textarea {...args} simple />}</Story>
</Canvas>

### No Padding

<Canvas>
  <Story name="No Padding">{args => <Textarea {...args} noPadding />}</Story>
</Canvas>

### Auto Height

<Canvas>
  <Story name="Auto Height">{args => <Textarea {...args} autoHeight />}</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"
              >
                Filled 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>
              <Textarea {...args} />
            </td>
            <td>
              <Textarea {...args} value="textarea example" />
            </td>
            <td>
              <Textarea {...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>
              <Textarea {...args} color="white" />
            </td>
            <td>
              <Textarea {...args} color="white" value="textarea example" />
            </td>
            <td>
              <Textarea {...args} color="white" disabled />
            </td>
          </tr>
          <tr>
            <td>
              <Headline
                extraBold
                transform="uppercase"
                as="span"
                color="text-gray-40"
                size="medium"
              >
                valid
              </Headline>
            </td>
            <td>
              <Textarea {...args} valid />
            </td>
            <td>
              <Textarea {...args} valid value="textarea example" />
            </td>
          </tr>
          <tr>
            <td>
              <Headline
                extraBold
                transform="uppercase"
                as="span"
                color="text-gray-40"
                size="medium"
              >
                invalid
              </Headline>
            </td>
            <td>
              <Textarea {...args} invalid />
            </td>
            <td>
              <Textarea {...args} invalid value="textarea example" />
            </td>
          </tr>
          <tr>
            <td>
              <Headline
                extraBold
                transform="uppercase"
                as="span"
                color="text-gray-40"
                size="medium"
              >
                invalid <br /> with message
              </Headline>
            </td>
            <td>
              <Textarea {...args} invalid errorMessage="Something went wrong" />
            </td>
            <td>
              <Textarea
                {...args}
                invalid
                errorMessage="Something went wrong"
                value="textarea example"
              />
            </td>
          </tr>
        </tbody>
      </StoryVariantTable>
    )}
  </Story>
</Canvas>