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 { TextWithTag } from './text-with-tag';

declare let module;

const STYLE: ViewStyle = {
  margin: spacing[4],
  paddingHorizontal: spacing[5],
  backgroundColor: color.palette.gorse,
};
const TEXT_STYLE: TextStyle = {
  color: color.palette.denim,
};
const TAG_STYLE: TextStyle = {
  backgroundColor: color.palette.carrotOrange,
};
const TAG_TEXT_STYLE: TextStyle = {
  color: color.palette.olive,
};

storiesOf('TextWithTag', module)
  .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
  .add('Defaults', () => (
    <Story>
      <UseCase text="Default" usage="Default use case">
        <TextWithTag tag="carpe" text="Lorem ipsum" />
      </UseCase>
      <UseCase text="Expanded" usage="With space between text and tag">
        <TextWithTag expanded tag="diem" text="Lorem ipsum" />
      </UseCase>
    </Story>
  ))
  .add('Style Presets', () => (
    <Story>
      <UseCase
        style={{ backgroundColor: color.palette.wildSand }}
        text="Primary"
        usage="Primary use case"
      >
        <TextWithTag tag="si" tagPreset="primary" text="Lorem ipsum" />
      </UseCase>
      <UseCase
        style={{ backgroundColor: color.palette.wildSand }}
        text="Secondary"
        usage="Secondary use case"
      >
        <TextWithTag tag="vis" tagPreset="secondary" text="Lorem ipsum" />
      </UseCase>
      <UseCase
        style={{ backgroundColor: color.palette.wildSand }}
        text="Success"
        usage="Success use case"
      >
        <TextWithTag tag="pacem" tagPreset="success" text="Lorem ipsum" />
      </UseCase>
      <UseCase
        style={{ backgroundColor: color.palette.wildSand }}
        text="Warning"
        usage="Warning use case"
      >
        <TextWithTag tag="para" tagPreset="warning" text="Lorem ipsum" />
      </UseCase>
      <UseCase
        style={{ backgroundColor: color.palette.wildSand }}
        text="Error"
        usage="Error use case"
      >
        <TextWithTag tag="bellum" tagPreset="error" text="Lorem ipsum" />
      </UseCase>
    </Story>
  ))
  .add('Styling', () => (
    <Story>
      <UseCase
        style={{ backgroundColor: color.palette.wildSand }}
        text="Container"
        usage="To change the root view style"
      >
        <TextWithTag style={STYLE} tag="test" text="Lorem ipsum" />
      </UseCase>
      <UseCase
        style={{ backgroundColor: color.palette.wildSand }}
        text="Text"
        usage="To change the main text style"
      >
        <TextWithTag tag="test" text="Lorem ipsum" textStyle={TEXT_STYLE} />
      </UseCase>
      <UseCase
        style={{ backgroundColor: color.palette.wildSand }}
        text="Tag container"
        usage="To change the tag view style"
      >
        <TextWithTag tag="test" tagStyle={TAG_STYLE} text="Lorem ipsum" />
      </UseCase>
      <UseCase
        style={{ backgroundColor: color.palette.wildSand }}
        text="Tag text"
        usage="To change the tag text style"
      >
        <TextWithTag tag="test" tagTextStyle={TAG_TEXT_STYLE} text="Lorem ipsum" />
      </UseCase>
    </Story>
  ));
