import {ArgsTable, Meta, Story, Canvas} from '@storybook/addon-docs';
import {formatTags} from '../../docs/utils';
import Text, {TEXT_COLOR, TEXT_SIZE} from './Text';
import {
  TEXT_ALIGN,
  TEXT_TRANSFORM,
  TEXT_WEIGHT,
  TEXT_WHITE_SPACE,
  TEXT_AS,
} from './textConsts';
import TextA11y from './stories/text.a11y.mdx';
import PageHeader from 'blocks/PageHeader';
import {StoryVariant} from '../../docs/utils';
import hex from '../colors/hex';

<Meta
  title="Components/Text"
  component={Text}
  args={{
    children:
      'Asking a question will get you up to two answers from our experts and star students.',
  }}
  argTypes={{
    children: {
      control: 'text',
    },
    type: {table: {defaultValue: {summary: TEXT_AS.DIV}}},
    size: {
      description: '(Responsive)',
      table: {
        type: {
          summary: formatTags(Object.values(TEXT_SIZE)),
        },
      },
      control: {
        type: 'select',
        options: Object.values(TEXT_SIZE),
      },
    },
    weight: {
      description: '(Responsive)',
      table: {
        type: {
          summary: formatTags(Object.values(TEXT_WEIGHT)),
        },
      },
      control: {
        type: 'radio',
        options: Object.values(TEXT_WEIGHT),
      },
    },
    transform: {
      description: '(Responsive)',
      table: {
        type: {
          summary: formatTags(Object.values(TEXT_TRANSFORM)),
        },
      },
      control: {
        type: 'select',
        options: Object.values(TEXT_TRANSFORM),
      },
    },
    align: {
      description: '(Responsive)',
      table: {
        type: {
          summary: formatTags(Object.values(TEXT_ALIGN)),
        },
      },
      control: {
        type: 'select',
        options: Object.values(TEXT_ALIGN),
      },
    },
    noWrap: {
      description: '(Responsive)',
      table: {
        type: {
          summary: 'boolean',
        },
      },
      control: {
        type: 'boolean',
      },
    },
    full: {
      description: '(Responsive)',
      table: {
        type: {
          summary: 'boolean',
        },
      },
      control: {
        type: 'boolean',
      },
    },
    breakWords: {
      description: '(Responsive)',
      table: {
        type: {
          summary: 'boolean',
        },
      },
      control: {
        type: 'boolean',
      },
    },
    whiteSpace: {
      description: '(Responsive)',
      table: {
        type: {
          summary: formatTags(Object.values(TEXT_WHITE_SPACE)),
        },
      },
      control: {
        type: 'select',
        options: Object.values(TEXT_WHITE_SPACE),
      },
    },
  }}
/>

<PageHeader>Text</PageHeader>

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

## Overview

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

<ArgsTable story="Default" />

## Stories

### Inherited styles

Text component does not inherit any styles by default. To turn inheritance you can use `inherited` prop. In below example nested Text component has same font size as parent, because of inherited styles.

<Canvas>
  <Story name="Inherited styles">
    {args => (
      <Text {...args} as="h2" size="large">
        <Text inherited as="span" weight="bold">
          83%
        </Text>{' '}
        of students say Brainly has made them more knowledgeable,{' '}
        <Text inherited as="span" weight="bold">
          84%
        </Text>{' '}
        find it has inspired them to ask more questions.
      </Text>
    )}
  </Story>
</Canvas>

### Sizes

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

### Underlined

<Canvas>
  <Story name="Underlined">
    {args => (
      <Link {...args} underlined>
        Some text
      </Link>
    )}
  </Story>
</Canvas>

### Weight

<Canvas>
  <Story name="Weight">
    {args => (
      <Flex direction="column">
        {Object.values(TEXT_WEIGHT).map(weight => (
          <StoryVariant label={`weight - ${weight}`} key={weight}>
            <Text {...args} weight={weight}>
              Some text
            </Text>
          </StoryVariant>
        ))}
      </Flex>
    )}
  </Story>
</Canvas>

### Transform

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

### Align

<Canvas>
  <Story name="Align">
    {args => (
      <Flex direction="column">
        {Object.values(TEXT_ALIGN).map(align => (
          <StoryVariant label={`align - ${align}`} key={align} width={400}>
            <Text {...args} align={align} style={{display: 'block'}}>
              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.
            </Text>
          </StoryVariant>
        ))}
      </Flex>
    )}
  </Story>
</Canvas>

### No wrap on white space

<Canvas>
  <Story name="White space no wrap">
    {args => (
      <div style={{border: '1px solid gray', width: '400px'}}>
        <Text {...args} noWrap>
          Aliquip sit pariatur laboris in aliqua. Enim esse eu est nisi eiusmod.
        </Text>
      </div>
    )}
  </Story>
</Canvas>

### Break words

<Canvas>
  <Story name="Break words">
    {args => (
      <div style={{border: '1px solid gray', width: '400px'}}>
        <Text {...args} breakWords>
          very-very-very-very-very-very-very-very-very-very-very-very-very-very-long-word
        </Text>
      </div>
    )}
  </Story>
</Canvas>

### As Container

<Canvas>
  <Story name="As Container">
    {args => (
      <div
        style={{
          position: 'relative',
          paddingTop: 30,
          border: '1px solid black',
        }}
      >
        <Text {...args} asContainer>
          The red box should be in the top-left corner of text, not above the
          text.The red box should be in the top-left corner of text, not above
          the text.The red box should be in the top-left corner of text, not
          above the text.
          <span
            style={{
              position: 'absolute',
              left: 0,
              top: 0,
              height: 20,
              width: 20,
              backgroundColor: hex['red-40'],
            }}
          />
        </Text>
      </div>
    )}
  </Story>
</Canvas>

### Full

<Canvas>
  <Story name="Full">
    {args => (
      <div
        style={{
          display: 'flex',
          backgroundColor: hex['gray-40'],
          padding: '10px 0',
        }}
      >
        <Text {...args} full style={{backgroundColor: hex['gray-20']}}>
          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.
        </Text>
      </div>
    )}
  </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 font size and weight based on window width.

<Canvas>
  <Text
    weight={[TEXT_WEIGHT.BOLD, null, TEXT_WEIGHT.REGULAR]}
    size={[TEXT_SIZE.SMALL, TEXT_SIZE.XXLARGE, null, TEXT_SIZE.XXXLARGE]}
  >
    Some text
  </Text>
</Canvas>

## Accessibility

<TextA11y />