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

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

import { Tag } from './tag';

declare let module;

const CASE_CONTAINER: ViewStyle = {
  flexDirection: 'row',
  justifyContent: 'space-evenly',
};
const STYLE: ViewStyle = {
  margin: spacing[4],
  paddingHorizontal: spacing[5],
  backgroundColor: color.palette.carrotOrange,
};
const TEXT_STYLE: TextStyle = {
  color: color.palette.toreaBay,
};

storiesOf('Tag', module)
  .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
  .add('Default', () => (
    <Story>
      <UseCase center text="Default" usage="Default use case">
        <Tag text="love" />
      </UseCase>
    </Story>
  ))
  .add('Styles Presets', () => (
    <Story>
      <UseCase style={CASE_CONTAINER} text="Primary" usage="Primary use case">
        <Tag preset="primary" text="love" />
        <Tag preset="primary-accent" text="lorem" />
      </UseCase>
      <UseCase style={CASE_CONTAINER} text="Secondary" usage="Secondary use case">
        <Tag preset="secondary" text="is" />
        <Tag preset="secondary-accent" text="ipsum" />
      </UseCase>
      <UseCase style={CASE_CONTAINER} text="Success" usage="Success use case">
        <Tag preset="success" text="what" />
        <Tag preset="success-accent" text="dolor" />
      </UseCase>
      <UseCase style={CASE_CONTAINER} text="Warning" usage="Warning use case">
        <Tag preset="warning" text="you" />
        <Tag preset="warning-accent" text="sit" />
      </UseCase>
      <UseCase style={CASE_CONTAINER} text="Error" usage="Error use case">
        <Tag preset="error" text="need" />
        <Tag preset="error-accent" text="amet" />
      </UseCase>
    </Story>
  ))
  .add('Styling', () => (
    <Story>
      <UseCase center style={CASE_CONTAINER} text="Styling" usage="With some styling">
        <Tag style={STYLE} text="favorite" textStyle={TEXT_STYLE} />
      </UseCase>
    </Story>
  ));
