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

<Meta
  title="Components/Search"
  component={Search}
  argTypes={{
    fullWidth: {
      control: {
        type: 'boolean',
      },
      table: {
        type: {summary: 'boolean'},
      },
    },
    size: {
      control: {type: 'select', options: Object.values(SIZE)},
      table: {
        type: {summary: formatTags(Object.values(SIZE))},
      },
      defaultValue: {summary: SIZE.M},
    },
    color: {
      control: {type: 'radio', options: Object.values(COLOR)},
      table: {
        type: {
          summary: formatTags(Object.values(COLOR)),
        },
        defaultValue: {summary: COLOR.DEFAULT},
      },
    },
    placeholder: {
      control: {
        type: 'text',
      },
      table: {
        type: {summary: 'string'},
      },
    },
  }}
  args={{placeholder: 'Find all the answers...'}}
/>

<PageHeader>Search</PageHeader>

- [Stories](#stories)

## Overview

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

<ArgsTable story="Default" />

## Stories

### Sizes

<Canvas>
  <Story name="Sizes">
    {args => (
      <StoryVariantTable>
        <tbody>
          <tr>
            <td />
            <td>
              <Flex justifyContent="center">
                <Headline
                  extraBold
                  transform="uppercase"
                  as="span"
                  color="text-gray-40"
                  size="medium"
                >
                  default
                </Headline>
              </Flex>
            </td>
            <td>
              <Flex justifyContent="center">
                <Headline
                  extraBold
                  transform="uppercase"
                  as="span"
                  color="text-gray-40"
                  size="medium"
                >
                  round button
                </Headline>
              </Flex>
            </td>
          </tr>
          {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>
                <Flex justifyContent="center">
                  <Search {...args} size={size} />
                </Flex>
              </td>
              <td>
                <Flex justifyContent="center">
                  <Search {...args} size={size} withRoundButton />
                </Flex>
              </td>
            </tr>
          ))}
        </tbody>
      </StoryVariantTable>
    )}
  </Story>
</Canvas>

### Styles and States

<Canvas>
  <Story name="Styles and States">
    {args => (
      <StoryVariantTable>
        <tbody>
          <tr>
            <td />
            <td>
              <Flex justifyContent="center">
                <Headline
                  extraBold
                  transform="uppercase"
                  as="span"
                  color="text-gray-40"
                  size="medium"
                >
                  neutral state
                </Headline>
              </Flex>
            </td>
            <td>
              <Flex justifyContent="center">
                <Headline
                  extraBold
                  transform="uppercase"
                  as="span"
                  color="text-gray-40"
                  size="medium"
                >
                  filled state
                </Headline>
              </Flex>
            </td>
          </tr>
          <tr>
            <td>
              <Headline
                extraBold
                transform="uppercase"
                as="span"
                color="text-gray-40"
                size="medium"
              >
                default
              </Headline>
            </td>
            <td>
              <Flex justifyContent="center">
                <Search {...args} />
              </Flex>
            </td>
            <td>
              <Flex justifyContent="center">
                <Search {...args} value="some" />
              </Flex>
            </td>
          </tr>
          <tr
            style={{
              backgroundColor: hex.black,
            }}
          >
            <td>
              <Headline
                extraBold
                transform="uppercase"
                as="span"
                color="text-white"
                size="medium"
              >
                white
              </Headline>
            </td>
            <td>
              <Flex justifyContent="center">
                <Search {...args} />
              </Flex>
            </td>
            <td>
              <Flex justifyContent="center">
                <Search {...args} value="some" />
              </Flex>
            </td>
          </tr>
          <tr>
            <td>
              <Headline
                extraBold
                transform="uppercase"
                as="span"
                color="text-gray-40"
                size="medium"
              >
                round button
              </Headline>
            </td>
            <td>
              <Flex justifyContent="center">
                <Search {...args} withRoundButton />
              </Flex>
            </td>
            <td>
              <Flex justifyContent="center">
                <Search {...args} value="some" withRoundButton />
              </Flex>
            </td>
          </tr>
          <tr
            style={{
              backgroundColor: hex.black,
            }}
          >
            <td>
              <Headline
                extraBold
                transform="uppercase"
                as="span"
                color="text-white"
                size="medium"
              >
                white round button
              </Headline>
            </td>
            <td>
              <Flex justifyContent="center">
                <Search {...args} withRoundButton />
              </Flex>
            </td>
            <td>
              <Flex justifyContent="center">
                <Search {...args} value="some" withRoundButton />
              </Flex>
            </td>
          </tr>
        </tbody>
      </StoryVariantTable>
    )}
  </Story>
</Canvas>