import {ArgsTable, Meta, Story, Canvas} from '@storybook/addon-docs';
import {StoryVariant, StoryVariantTable} from '../../docs/utils';
import {formatTags} from '../../docs/utils';

import Counter, {COUNTER_SIZE, COUNTER_VARIANT, COUNTER_COLOR} from './Counter';
import {TYPE as ICON_TYPE} from '../icons/Icon';
import Flex from '../flex/Flex';
import Headline from '../text/Headline';
import Text from '../text/Text';
import CounterA11y from './stories/Counter.a11y.mdx';
import PageHeader from 'blocks/PageHeader';

<Meta
  title="Components/Counter"
  component={Counter}
  argTypes={{
    size: {control: {type: 'select', options: COUNTER_SIZE}},
    withAnimation: {control: 'boolean'},
    variant: {control: {type: 'select', options: COUNTER_VARIANT}},
    color: {control: {type: 'select', options: COUNTER_COLOR}},
    icon: {
      control: {type: 'select', options: Object.values(ICON_TYPE)},
      table: {type: {summary: formatTags(Object.values(ICON_TYPE))}},
    },
    children: {
      control: {
        type: 'text',
      },
    },
  }}
  args={{
    children: '25',
  }}
/>

<PageHeader>Counter</PageHeader>

- [Stories](#stories)
- [Accessibility](#accessibility)

## Overview

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

<ArgsTable story="Default" />

## Stories

### Sizes and variants

<Canvas>
  <Story name="SizesAndVariants">
    {args => (
      <div>
        <StoryVariantTable>
          <thead>
            <tr>
              <th />
              <th>
                <Headline
                  extraBold
                  transform="uppercase"
                  as="span"
                  color="text-gray-40"
                  size="medium"
                >
                  solid
                </Headline>
              </th>
              <th>
                <Headline
                  extraBold
                  transform="uppercase"
                  as="span"
                  color="text-gray-40"
                  size="medium"
                >
                  light
                </Headline>
              </th>
              <th>
                <Headline
                  extraBold
                  transform="uppercase"
                  as="span"
                  color="text-gray-40"
                  size="medium"
                >
                  with icon
                </Headline>
              </th>
            </tr>
          </thead>
          <tbody>
            {Object.values(COUNTER_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">
                    <Counter key={size} {...args} size={size} variant="solid">
                      2
                    </Counter>
                  </Flex>
                </td>
                <td>
                  <Flex justifyContent="center">
                    <Counter key={size} {...args} size="xs" variant="light">
                      2
                    </Counter>
                  </Flex>
                </td>
                <td>
                  <Flex justifyContent="center">
                    <Counter
                      key={size}
                      {...args}
                      icon={ICON_TYPE.POINTS}
                      size={size}
                    >
                      +15
                      <Text as="span" color="text-gray-60" inherited>
                        {size !== 'xxs' && ` pts`}{' '}
                      </Text>
                    </Counter>
                  </Flex>
                </td>
              </tr>
            ))}
          </tbody>
        </StoryVariantTable>
      </div>
    )}
  </Story>
</Canvas>

### Colors

<Canvas>
  <Story name="Colors">
    {args => (
      <div>
        <StoryVariantTable>
          <thead>
            <tr>
              <th />
              <th>
                <Headline
                  extraBold
                  transform="uppercase"
                  as="span"
                  color="text-gray-40"
                  size="medium"
                >
                  solid
                </Headline>
              </th>
              <th>
                <Headline
                  extraBold
                  transform="uppercase"
                  as="span"
                  color="text-gray-40"
                  size="medium"
                >
                  light
                </Headline>
              </th>
            </tr>
          </thead>
          <tbody>
            {Object.values(COUNTER_COLOR).map(color => (
              <tr key={color}>
                <td>
                  <Headline
                    extraBold
                    transform="uppercase"
                    as="span"
                    color="text-gray-40"
                    size="medium"
                  >
                    {color}
                  </Headline>
                </td>
                <td>
                  <Flex justifyContent="center">
                    <Counter
                      key={color}
                      {...args}
                      size="xs"
                      variant="solid"
                      color={color}
                    >
                      2
                    </Counter>
                  </Flex>
                </td>
                <td
                  style={{
                    backgroundColor:
                      color === 'achromatic' ? 'black' : 'transparent',
                  }}
                >
                  <Flex justifyContent="center">
                    <Counter
                      key={color}
                      {...args}
                      size="xs"
                      variant="light"
                      color={color}
                    >
                      2
                    </Counter>
                  </Flex>
                </td>
              </tr>
            ))}
          </tbody>
        </StoryVariantTable>
      </div>
    )}
  </Story>
</Canvas>

## Accessibility

<CounterA11y />