import {ArgsTable, Meta, Story, Canvas} from '@storybook/addon-docs';
import SeparatorVertical, {SIZE, COLORS_MAP} from './SeparatorVertical';
import {StoryVariant, StoryVariantBorderBox} from '../../docs/utils';
import PageHeader from 'blocks/PageHeader';
import Flex from '../flex/Flex';
import Text from '../text/Text';
import SeparatorsA11y from './stories/Separators.a11y.mdx';

<Meta
  title="Components/separators/SeparatorVertical"
  component={SeparatorVertical}
  argTypes={{
    color: {
      control: 'select',
      table: {
        defaultValue: {
          summary: COLORS_MAP['gray-40'],
        },
      },
    },
    size: {
      control: 'select',
    },
  }}
/>

<PageHeader>SeparatorVertical</PageHeader>

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

## Overview

<Canvas>
  <Story name="Default">
    {args => (
      <div>
        left
        <SeparatorVertical {...args} />
        right
      </div>
    )}
  </Story>
</Canvas>

<ArgsTable story="Default" />

## Stories

### Sizes

<Canvas>
  <Story name="Sizes">
    {args => (
      <div>
        {Object.values(SIZE).map(size => (
          <StoryVariant label={`size - ${size}`} key={size}>
            {size === SIZE.FULL ? (
              <StoryVariantBorderBox height={200}>
                <Flex alignItems="center" fullHeight>
                  left
                  <SeparatorVertical {...args} size={size} />
                  right
                </Flex>
              </StoryVariantBorderBox>
            ) : (
              <Flex alignItems="center" fullHeight>
                left
                <SeparatorVertical {...args} size={size} />
                right
              </Flex>
            )}
          </StoryVariant>
        ))}
      </div>
    )}
  </Story>
</Canvas>

### Colors

<Canvas>
  <Story name="Colors">
    {args => (
      <div>
        {Object.values(COLORS_MAP).map(color => (
          <StoryVariant label={`color - ${color}`} key={color}>
            {color === 'white' ? (
              <div className="sg-story-variant-dark-box">
                <Flex alignItems="center">
                  <Text color="text-white" size="small">
                    left
                  </Text>
                  <SeparatorVertical {...args} color={color} />
                  <Text color="text-white" size="small">
                    right
                  </Text>
                </Flex>
              </div>
            ) : (
              <div>
                <Flex alignItems="center">
                  <Text size="small">left</Text>
                  <SeparatorVertical {...args} color={color} />
                  <Text size="small">right</Text>
                </Flex>
              </div>
            )}
          </StoryVariant>
        ))}
      </div>
    )}
  </Story>
</Canvas>

## Accessibility

<SeparatorsA11y />