import {ArgsTable, Meta, Story, Canvas} from '@storybook/addon-docs';
import {formatTags} from '../../docs/utils';
import TextBit, {TEXT_BIT_SIZE, TEXT_COLOR} from './TextBit';
import TextBitA11y from './stories/TextBit.a11y.mdx';
import PageHeader from 'blocks/PageHeader';
import {StoryVariant} from '../../docs/utils';

<Meta
  title="Components/TextBit"
  component={TextBit}
  argTypes={{
    children: {control: 'text'},
    size: {
      description: '(Responsive)',
      table: {
        type: {
          summary: formatTags(Object.values(TEXT_BIT_SIZE)),
        },
      },
      control: {
        type: 'select',
        options: Object.values(TEXT_BIT_SIZE),
      },
    },
    color: {
      control: {
        type: 'select',
        options: Object.values(TEXT_COLOR),
      },
      table: {
        type: {
          summary: formatTags(Object.values(TEXT_COLOR)),
        },
      },
    },
  }}
  args={{
    children: 'TextBit',
  }}
/>

<PageHeader>TextBit</PageHeader>

- [Stories](#stories)
- [Responsive props](#responsive-props)
- [Accessibility](#accessibility)

## Overview

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

<ArgsTable story="Default" />

## Stories

### Inherited styles

<Canvas>
  <Story name="Nested">
    {args => (
      <TextBit {...args} as="h2">
        SEARCH{' '}
        <TextBit inherited as="span" color="text-green-60">
          QUESTIONS{' '}
        </TextBit>
        OR ASK YOUR OWN
      </TextBit>
    )}
  </Story>
</Canvas>

### Sizes

<Canvas>
  <Story name="Sizes">
    {args => (
      <Flex direction="column">
        {Object.values(TEXT_BIT_SIZE).map(size => (
          <StoryVariant label={`size - ${size}`} key={size}>
            <TextBit {...args} size={size}>
              Some text
            </TextBit>
          </StoryVariant>
        ))}
      </Flex>
    )}
  </Story>
</Canvas>

### Colors

<Canvas>
  <Story name="Colors">
    {args => (
      <Flex direction="column">
        {Object.values(TEXT_COLOR).map(color => (
          <StoryVariant label={`color - ${color}`} key={color}>
            <div
              style={{backgroundColor: color === 'text-white' ? '#c3d1dd' : ''}}
            >
              <TextBit {...args} color={color}>
                Some text
              </TextBit>
            </div>
          </StoryVariant>
        ))}
      </Flex>
    )}
  </Story>
</Canvas>

## Responsive props

To control styles that differ across screen sizes you can use responsive props. All props marked as Responsive support [object and array syntax](/story/foundation-✨-responsive-props--page).
Resize window to check how component is changing flex direction and item margins based on window width.

<Canvas>
  <TextBit
    size={[
      TEXT_BIT_SIZE.SMALL,
      TEXT_BIT_SIZE.MEDIUM,
      null,
      TEXT_BIT_SIZE.LARGE,
    ]}
  >
    Responsive size
  </TextBit>
</Canvas>

## Accessibility

<TextBitA11y />