// @flow
import React from 'react';
import { storiesOf } from '@storybook/react';
import { Text } from './index';
import { Box } from '../../../primitives/box';
import { withDocs } from '../../../../.storybook/with-docs';
import docs from './TEXT.mkd';

storiesOf('Core/Text/Text', module)
  .add(
    'normal',
    withDocs(docs)(() => (
      <Box>
        <Text fontSize="f1">The quick red fox jumped over the lazy dogs.</Text>
        <Text>The quick red fox jumped over the lazy dogs.</Text>
        <Text fontSize="f3">The quick red fox jumped over the lazy dogs.</Text>
        <Text fontSize="f4">The quick red fox jumped over the lazy dogs.</Text>
        <Text fontSize="f5">The quick red fox jumped over the lazy dogs.</Text>
      </Box>
    )),
  )
  .add('number', withDocs(docs)(() => <Text>$1,234,567.89</Text>))
  .add('tabular', withDocs(docs)(() => <Text tabular>$1,234,567.89</Text>))
  .add(
    'alert messages',
    withDocs(docs)(() => (
      <Box>
        <Text colorName="success-fg">Success! Something good happened.</Text>
        <Text colorName="error-fg">Oops! Something went wrong!</Text>
        <Text colorName="info-fg">Something neutral happened.</Text>
      </Box>
    )),
  )
  .add(
    'bold',
    withDocs(docs)(() => (
      <Text bold>The quick red fox jumped over the lazy dogs.</Text>
    )),
  )
  .add(
    'underlined',
    withDocs(docs)(() => (
      <Text underlined>The quick red fox jumped over the lazy dogs.</Text>
    )),
  )
  .add(
    'italic',
    withDocs(docs)(() => (
      <Text italic>The quick red fox jumped over the lazy dogs.</Text>
    )),
  )
  .add(
    'uppercase',
    withDocs(docs)(() => (
      <Text casing="uppercase">
        The quick red fox jumped over the lazy dogs.
      </Text>
    )),
  )
  .add(
    'all the things',
    withDocs(docs)(() => (
      <Text casing="uppercase" bold underlined italic>
        The quick red fox jumped over the lazy dogs.
      </Text>
    )),
  );
