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

import { Text, textPresets } from '~/components/text';
import { StoryScreen, Story, UseCase } from '~/storybook/views';
import { color, metrics, spacing } from '~/theme';

import { TwoLinesText } from './two-lines-text';

declare let module;

const STYLE: ViewStyle = {
  alignItems: 'flex-end',
};
const TITLE_STYLE: TextStyle = {
  color: color.primary,
  ...textPresets.header4,
};
const SUBTITLE_STYLE: TextStyle = {
  color: color.palette.ebony,
  marginTop: spacing[4],
  ...textPresets.subtitle2,
};
const SUBTITLE_ELEMENT_STYLE: ViewStyle = {
  flexDirection: 'row',
};
const TEXT_STYLE1: TextStyle = {
  padding: spacing[1],
  backgroundColor: color.palette.aquamarine,
};
const TEXT_STYLE2: TextStyle = {
  padding: spacing[1],
  backgroundColor: color.palette.gorse,
};
const LEFT_MARGIN: ViewStyle = {
  marginLeft: spacing[2],
};
const CustomElement: React.FC = () => (
  <View style={SUBTITLE_ELEMENT_STYLE}>
    <Text style={TEXT_STYLE1}>Lorem ipsum</Text>
    <Text style={[TEXT_STYLE2, LEFT_MARGIN]}>dolor sit amet</Text>
  </View>
);

storiesOf('TwoLinesText', module)
  .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
  .add('Default', () => (
    <Story>
      <UseCase text="Default" usage="The default component.">
        <TwoLinesText subtitle="dolor sit amet" title="Lorem ipsum" />
      </UseCase>
      <UseCase text="With separator" usage="The default component with separator.">
        <TwoLinesText separator subtitle="dolor sit amet" title="Lorem ipsum" />
      </UseCase>
    </Story>
  ))
  .add('Style Presets', () => (
    <Story>
      <UseCase text='"item-list"' usage='With "item-list" the item is above.'>
        <TwoLinesText preset="item-list" subtitle="dolor sit amet" title="Lorem ipsum" />
      </UseCase>
      <UseCase text='"list-item"' usage='With "list-item" the item is below.'>
        <TwoLinesText preset="list-item" subtitle="dolor sit amet" title="Lorem ipsum" />
      </UseCase>
      <UseCase text="Preset without separator" usage="When the item is the last in the list.">
        <TwoLinesText
          preset="list-item"
          separator={false}
          subtitle="dolor sit amet"
          title="Lorem ipsum"
        />
      </UseCase>
    </Story>
  ))
  .add('Styling', () => (
    <Story>
      <UseCase text="Custom styles" usage="The component with custom styles.">
        <TwoLinesText
          style={STYLE}
          subtitle="dolor sit amet"
          subtitleStyle={SUBTITLE_STYLE}
          title="Lorem ipsum"
          titleStyle={TITLE_STYLE}
        />
      </UseCase>
      <UseCase text="With separator color" usage="Change the separator color.">
        <TwoLinesText
          preset="item-list"
          separatorColor={color.success}
          subtitle="dolor sit amet"
          title="Lorem ipsum"
        />
      </UseCase>
      <UseCase text="With separator width" usage="Change the separator width.">
        <TwoLinesText
          preset="item-list"
          separatorColor={color.success}
          separatorWidth={metrics.borderWidth[2]}
          subtitle="dolor sit amet"
          title="Lorem ipsum"
        />
      </UseCase>
    </Story>
  ))
  .add('Transforming', () => (
    <Story>
      <UseCase text="Title emphasized" usage="The title emphasized">
        <TwoLinesText
          preset="item-list"
          subtitle="dolor sit amet"
          title="lorem ipsum"
          titleTransform="emphasize"
        />
      </UseCase>
      <UseCase text="Subtitle capitalized" usage="With the subtitle capitalized">
        <TwoLinesText
          preset="item-list"
          subtitle="dolor sit amet"
          subtitleTransform="uppercase"
          title="lorem ipsum"
        />
      </UseCase>
      <UseCase
        text="Title capitalized, subtitle emphasized"
        usage="With the title capitailzed and the subtitle emphasized"
      >
        <TwoLinesText
          preset="item-list"
          subtitle="dolor sit amet"
          subtitleTransform="emphasize"
          title="lorem ipsum"
          titleTransform="uppercase"
        />
      </UseCase>
    </Story>
  ))
  .add('With custom element', () => (
    <Story>
      <UseCase text="Title component" usage="When you need a compound title.">
        <TwoLinesText subtitle="Lorem ipsum" title={<CustomElement />} />
      </UseCase>
      <UseCase text="Subtitle component" usage="When you need a compound subtitle.">
        <TwoLinesText subtitle={<CustomElement />} title="Lorem ipsum" />
      </UseCase>
      <UseCase text="Array subtitle" usage="When you want to have a list of subtitles.">
        <TwoLinesText
          subtitle={['Tried pairing to space_x', 'Added to group G-12']}
          title="Lorem ipsum"
        />
      </UseCase>
      <UseCase
        text="Nodes array subtitle"
        usage="When you want to have a list of subtitles formed by nodes."
      >
        <TwoLinesText
          subtitle={[
            <Text key="subtitle-1">
              Tried pairing to <Text boldType="bold" text="space_x" />
            </Text>,
            <Text key="subtitle-2">
              added to group <Text boldType="bold" text="G-123" />
            </Text>,
          ]}
          title="Lorem ipsum"
        />
      </UseCase>
    </Story>
  ));
