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

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

import { ListItem } from './list-item';

declare let module;

const RIGHT_VIEW: ViewStyle = {
  height: '100%',
  paddingVertical: spacing[4] + spacing[0],
  justifyContent: 'flex-start',
};
const BULLET_STYLE: ViewStyle = {
  height: 8,
  width: 8,
  backgroundColor: 'red',
};
const rightComponent = (
  <Icon color={color.active} name="chevron-right" size={typography.fontSize[5]} />
);
const leftComponent = (
  <View style={RIGHT_VIEW}>
    <View style={BULLET_STYLE} />
  </View>
);

storiesOf('ListItem', module)
  .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
  .add('Style Presets', () => (
    <Story>
      <UseCase text="Default" usage='With "item-list" the item is above.'>
        <ListItem subtitle="dolor sit amet" title="Lorem ipsum" />
      </UseCase>
      <UseCase text='"list-item"' usage='With "list-item" the item is below.'>
        <ListItem preset="list-item" subtitle="dolor sit amet" title="Lorem ipsum" />
      </UseCase>
    </Story>
  ))
  .add('Side components', () => (
    <Story>
      <UseCase text="Right side" usage="With a component in the right.">
        <ListItem rightComponent={rightComponent} subtitle="dolor sit amet" title="Lorem ipsum" />
      </UseCase>
      <UseCase text="Left side" usage="With a component in the left.">
        <ListItem leftComponent={leftComponent} subtitle="dolor sit amet" title="Lorem ipsum" />
      </UseCase>
      <UseCase text="Both sides" usage="With components in both sides.">
        <ListItem
          leftComponent={leftComponent}
          rightComponent={rightComponent}
          subtitle="dolor sit amet"
          title="Lorem ipsum"
        />
      </UseCase>
    </Story>
  ))
  .add('Styling', () => (
    <Story>
      <UseCase text="Without separator" usage="When the separator is not needed.">
        <ListItem
          leftComponent={leftComponent}
          rightComponent={rightComponent}
          separator={false}
          subtitle="dolor sit amet"
          title="Lorem ipsum"
        />
      </UseCase>
      <UseCase text="With separator color" usage="To give more importance to an item.">
        <ListItem
          leftComponent={leftComponent}
          rightComponent={rightComponent}
          separatorColor={color.success}
          subtitle="dolor sit amet"
          title="Lorem ipsum"
        />
      </UseCase>
      <UseCase text="With separator width" usage="To give more importance to an item.">
        <ListItem
          leftComponent={leftComponent}
          rightComponent={rightComponent}
          separatorColor={color.success}
          separatorWidth={metrics.borderWidth[2]}
          subtitle="dolor sit amet"
          title="Lorem ipsum"
        />
      </UseCase>
    </Story>
  ))
  .add('Transforming', () => (
    <Story>
      <UseCase text="Capitalize" usage="With title capitalized">
        <ListItem subtitle="dolor sit amet" title="lorem ipsum" titleTransform="capitalize" />
      </UseCase>
      <UseCase text="Emphasize" usage="With subtitle emphasized">
        <ListItem subtitle="dolor sit amet" subtitleTransform="emphasize" title="lorem ipsum" />
      </UseCase>
      <UseCase text="Uppercase and emphasize" usage="Title uppercased and subtitle emphasized">
        <ListItem
          subtitle="dolor sit amet"
          subtitleTransform="emphasize"
          title="lorem ipsum"
          titleTransform="uppercase"
        />
      </UseCase>
    </Story>
  ));
