import {ArgsTable, Meta, Story, Canvas} from '@storybook/addon-docs';
import {formatTags} from '../../docs/utils';
import Headline from './Headline';
import {TEXT_COLOR} from './textConsts';
import {
  HEADLINE_ALIGN,
  HEADLINE_SIZE,
  HEADLINE_TRANSFORM,
  HEADLINE_AS,
} from './headlineConsts';
import HeadlineA11y from './stories/Headline.a11y.mdx';
import PageHeader from 'blocks/PageHeader';
import Flex from '../flex/Flex';
import {StoryVariant} from '../../docs/utils';

<Meta
  title="Components/Headline"
  component={Headline}
  args={{
    children: 'some text',
  }}
  argTypes={{
    children: {control: 'text'},
    type: {table: {defaultValue: {summary: HEADLINE_AS.H1}}},
    size: {
      description: '(Responsive)',
      table: {
        type: {
          summary: formatTags(Object.values(HEADLINE_SIZE)),
        },
      },
      control: {
        type: 'select',
        options: Object.values(HEADLINE_SIZE),
      },
    },
    color: {
      table: {
        type: {
          summary: formatTags(Object.values(TEXT_COLOR)),
        },
      },
      control: {
        type: 'select',
        options: Object.values(TEXT_COLOR),
      },
    },
    transform: {
      description: '(Responsive)',
      table: {
        type: {
          summary: formatTags(Object.values(HEADLINE_TRANSFORM)),
        },
      },
      control: {
        type: 'select',
        options: Object.values(HEADLINE_TRANSFORM),
      },
    },
    align: {
      description: '(Responsive)',
      table: {
        type: {
          summary: formatTags(Object.values(HEADLINE_ALIGN)),
        },
      },
      control: {
        type: 'select',
        options: Object.values(HEADLINE_ALIGN),
      },
    },
    extraBold: {
      description: '(Responsive)',
      table: {
        type: {
          summary: 'boolean',
        },
      },
      control: {
        type: 'boolean',
      },
    },
  }}
/>

<PageHeader>Headline</PageHeader>

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

## Overview

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

<ArgsTable story="Default" />

## Stories

### Nested

<Canvas>
  <Story name="Nested">
    {args => (
      <Headline {...args} as="h2" color={TEXT_COLOR['text-red-60']}>
        Outer headline{' '}
        <Headline inherited as="span">
          nested Headline with inherited styles
        </Headline>
      </Headline>
    )}
  </Story>
</Canvas>

### Sizes

<Canvas>
  <Story name="Sizes">
    {args => (
      <Flex direction="column">
        {Object.values(HEADLINE_SIZE).map(size => (
          <StoryVariant label={`size - ${size}`} key={size}>
            <Headline {...args} size={size}>
              Some text
            </Headline>
          </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' : ''}}
            >
              <Headline {...args} color={color}>
                Some text
              </Headline>
            </div>
          </StoryVariant>
        ))}
      </Flex>
    )}
  </Story>
</Canvas>

### Transforms

<Canvas>
  <Story name="Transforms">
    {args => (
      <Flex direction="column">
        {Object.values(HEADLINE_TRANSFORM).map(transform => (
          <StoryVariant label={`transform - ${transform}`} key={transform}>
            <Headline {...args} color={transform}>
              Some text
            </Headline>
          </StoryVariant>
        ))}
      </Flex>
    )}
  </Story>
</Canvas>

### Extrabold

<Canvas>
  <Story name="Extrabold">
    {args => (
      <Headline {...args} extraBold>
        Some text
      </Headline>
    )}
  </Story>
</Canvas>

### Align

<Canvas>
  <Story name="Align">
    {args => (
      <Flex direction="column">
        {Object.values(HEADLINE_ALIGN).map(align => (
          <StoryVariant label={`align - ${align}`} key={align} width={400}>
            <Headline {...args} color={align}>
              Aliquip sit pariatur laboris in aliqua. Enim esse eu est nisi
              eiusmod minim deserunt ut cupidatat dolore velit deserunt nisi.
              Enim in anim aute non.
            </Headline>
          </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>
  <Headline
    extraBold={[false, null, true]}
    size={[
      HEADLINE_SIZE.SMALL,
      HEADLINE_SIZE.XXLARGE,
      null,
      HEADLINE_SIZE.XXXLARGE,
    ]}
  >
    Some text
  </Headline>
</Canvas>

## Accessibility

<HeadlineA11y />