/* eslint-disable react-native/no-inline-styles */

//import { storiesOf } from '@storybook/react-native';
import * as React from 'react';
import { TextStyle } from 'react-native';

//import { StoryScreen, Story, UseCase } from '~/storybook/views';
import { color } from '~/theme';

import { Text } from './text';

declare let module;

const TEXT_STYLE = {
  padding: 10,
  backgroundColor: color.palette.wildSand,
} as TextStyle;
/* 
storiesOf('Text', module)
  .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
  .add('Style Presets', () => (
    <Story>
      <UseCase text="header1" usage="">
        <Text preset="header1">Header 1</Text>
      </UseCase>
      <UseCase text="header2" usage="">
        <Text preset="header2">Header 2</Text>
      </UseCase>
      <UseCase text="header3" usage="">
        <Text preset="header3">Header 3</Text>
      </UseCase>
      <UseCase text="header4" usage="">
        <Text preset="header4">Header 4</Text>
      </UseCase>
      <UseCase text="header5" usage="">
        <Text preset="header5">Header 5</Text>
      </UseCase>
      <UseCase text="header6" usage="">
        <Text preset="header6">Header 6</Text>
      </UseCase>
      <UseCase text="subtitle1" usage="">
        <Text preset="subtitle2">Subtitle 1</Text>
      </UseCase>
      <UseCase text="subtitle2" usage="">
        <Text preset="subtitle2">Subtitle 2</Text>
      </UseCase>
      <UseCase text="body1" usage="Default">
        <Text preset="body1">Body 1</Text>
      </UseCase>
      <UseCase text="body2" usage="">
        <Text preset="body2">Body 2</Text>
      </UseCase>
      <UseCase text="caption" usage="">
        <Text preset="caption">Caption.</Text>
      </UseCase>
      <UseCase text="overline" usage="">
        <Text preset="overline">Overline.</Text>
      </UseCase>
    </Story>
  ))
  .add('Passing Content', () => (
    <Story>
      <UseCase
        text="text"
        usage="Used when you want to pass a value but don't want to open a child."
      >
        <Text text="Hey!" />
      </UseCase>
      <UseCase text="tx" usage="Used for looking up i18n keys.">
        <Text tx="common.ok" />
        <Text tx="common.cancel" />
      </UseCase>
      <UseCase
        text="children"
        usage="Used like you would normally use a React Native <Text> component."
      >
        <Text>Passing strings as children.</Text>
      </UseCase>
      <UseCase text="nested children" usage="You can embed them and change styles too.">
        <Text>
          Hello <Text preset="subtitle2">bolded</Text> World.
        </Text>
      </UseCase>
    </Story>
  ))
  .add('Transforming', () => (
    <Story>
      <UseCase text="Capitalize" usage="Capitalize first letter of the sentence">
        <Text text="lorem ipsum sit amet" transform="capitalize" />
      </UseCase>
      <UseCase text="Emphasize" usage="Capitalize first letter of each word">
        <Text text="lorem ipsum sit amet" transform="emphasize" />
      </UseCase>
      <UseCase text="Uppercase" usage="Capitalize the entire text">
        <Text text="lorem ipsum sit amet" transform="uppercase" />
      </UseCase>
    </Story>
  ))
  .add('Styling', () => (
    <Story>
      <UseCase text="Style array" usage="Text with style array">
        <Text style={TEXT_STYLE}>Hello World.</Text>
      </UseCase>
    </Story>
  )); */
