import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { Platform } from 'react-native';

import { Typography } from './Typography';

storiesOf('Components/Atoms/Typography', module)
  .add('Default', () => <Typography>Base text</Typography>)
  .add('Theme colors', () => (
    <>
      <Typography color="red.300">Red - Hue 300</Typography>
      <Typography color="blue.400">Blue - Hue 400</Typography>
      <Typography color="green.500">Green - Hue 500</Typography>
      <Typography color="orange.600">Orange - Hue 600</Typography>
      <Typography color="grey.500">Grey - Hue 500</Typography>
      <Typography color="purple.500">And many more...</Typography>
    </>
  ))
  .add('Headline variants', () => (
    <>
      <Typography variant="headline1">Headline 1</Typography>
      <Typography variant="headline2">Headline 2</Typography>
      <Typography variant="headline3">Headline 3</Typography>
      <Typography variant="headline4">Headline 4</Typography>
      <Typography variant="headline5">Headline 5</Typography>
      <Typography variant="headline6">Headline 6</Typography>
    </>
  ))
  .add('Body variants', () => (
    <>
      <Typography variant="body1">Body 1</Typography>
      <Typography variant="body2">Body 2</Typography>
    </>
  ))
  .add('Subtitle variants', () => (
    <>
      <Typography variant="subtitle1">Subtitle 1</Typography>
      <Typography variant="subtitle2">Subtitle 2</Typography>
    </>
  ))
  .add('Other variants', () => (
    <>
      <Typography variant="button">Button</Typography>
      <Typography variant="caption">Caption</Typography>
      <Typography variant="overline">Overline</Typography>
    </>
  ))
  .add('Decoration', () => (
    <>
      <Typography decorationLine="underline">Underline</Typography>
      <Typography decorationLine="line-through">Line through</Typography>
      {Platform.OS === 'web' && (
        <Typography decorationLine="line-through" decorationColor="red.500">
          Line through with color (Web only)
        </Typography>
      )}
      <Typography decorationLine="underline line-through">
        Underline and line through
      </Typography>
    </>
  ));