import {ArgsTable, Meta, Story, Canvas} from '@storybook/addon-docs';
import {formatTags} from '../../docs/utils';
import {TEXT_COLOR} from './textConsts';
import Subheadline from './Subheadline';
import {
  SUBHEADLINE_ALIGN,
  SUBHEADLINE_SIZE,
  SUBHEADLINE_TRANSFORM,
  SUBHEADLINE_AS,
} from './subheadlineConsts';
import Box from '../box/Box';
import Flex from '../flex/Flex';
import SubheadlineA11y from './stories/Subheadline.a11y.mdx';
import PageHeader from 'blocks/PageHeader';
import {StoryVariant} from '../../docs/utils';

<Meta
  title="Components/Subheadline"
  component={Subheadline}
  args={{
    children: 'Subheadline',
  }}
  argTypes={{
    children: {
      control: 'text',
    },
    type: {table: {defaultValue: {summary: SUBHEADLINE_AS.H2}}},
    size: {
      description: '(Responsive)',
      table: {
        type: {
          summary: formatTags(Object.values(SUBHEADLINE_SIZE)),
        },
      },
      control: {
        type: 'select',
        options: Object.values(SUBHEADLINE_SIZE),
      },
    },
    transform: {
      description: '(Responsive)',
      table: {
        type: {
          summary: formatTags(Object.values(SUBHEADLINE_TRANSFORM)),
        },
      },
      control: {
        type: 'select',
        options: Object.values(SUBHEADLINE_TRANSFORM),
      },
    },
    align: {
      description: '(Responsive)',
      table: {
        type: {
          summary: formatTags(Object.values(SUBHEADLINE_ALIGN)),
        },
      },
      control: {
        type: 'select',
        options: Object.values(SUBHEADLINE_ALIGN),
      },
    },
    color: {
      table: {
        type: {
          summary: formatTags(Object.values(TEXT_COLOR)),
        },
      },
      control: {
        type: 'select',
        options: Object.values(TEXT_COLOR),
      },
    },
  }}
/>

<PageHeader>Subheadline</PageHeader>

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

## Overview

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

<ArgsTable story="Default" />

## Stories

### Colors

<Canvas>
  <Story name="Colors">
    {args => (
      <div>
        {Object.values(TEXT_COLOR).map(color => (
          <Box
            color={
              color === TEXT_COLOR['text-white'] ? 'indigo-40' : 'transparent'
            }
            padding="s"
            key={color}
          >
            <Subheadline {...args} color={color}>
              Subheadline
            </Subheadline>
          </Box>
        ))}
      </div>
    )}
  </Story>
</Canvas>

### Sizes

<Canvas>
  <Story name="Sizes">
    {args => (
      <Flex direction="column">
        {Object.values(SUBHEADLINE_SIZE).map(size => (
          <Flex direction="column" key={size} marginBottom="s">
            {size}
            <Subheadline {...args} color={size}>
              Subheadline
            </Subheadline>
          </Flex>
        ))}
      </Flex>
    )}
  </Story>
</Canvas>

### Alignments

<Canvas>
  <Story name="Alignments">
    {args => (
      <div>
        {Object.values(SUBHEADLINE_ALIGN).map(alignment => (
          <Flex marginBottom="s" direction="column">
            {alignment}
            <Box color="indigo-20" key={alignment}>
              <Subheadline {...args} align={alignment}>
                Subheadline
              </Subheadline>
            </Box>
          </Flex>
        ))}
      </div>
    )}
  </Story>
</Canvas>

### Transforms

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

### Inherited styles

Using prop `inherited` makes Subheadline inherits styles from parent e.g. size. We can still use other props to change appearance.

<Canvas>
  <Story name="Inherited Styles">
    {args => (
      <Subheadline {...args} as="h2" size="large">
        The Brainly community is constantly{' '}
        <Subheadline inherited as="span" color={TEXT_COLOR['text-indigo-60']}>
          buzzing
        </Subheadline>{' '}
        with the excitement of endless collaboration.
      </Subheadline>
    )}
  </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>
  <Subheadline
    color={[
      TEXT_COLOR['text-red-40'],
      TEXT_COLOR['text-blue-40'],
      TEXT_COLOR['text-indigo-40'],
    ]}
    size={[
      SUBHEADLINE_SIZE.SMALL,
      SUBHEADLINE_SIZE.XXLARGE,
      null,
      SUBHEADLINE_SIZE.XXXLARGE,
    ]}
  >
    Subheadline
  </Subheadline>
</Canvas>

## Accessibility

<SubheadlineA11y />