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

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

import { TextWithIcon } from './text-with-icon';

declare let module;

const RIGHT_ICONS: IconType[] = [
  {
    name: 'checkmark-rounded-rectangle',
    color: color.active,
    size: typography.fontSize[3],
  },
  {
    name: 'close-rounded-rectangle',
    color: color.active,
    size: typography.fontSize[3],
  },
];
const LEFT_ICONS: IconType[] = [
  {
    name: 'groups',
    color: color.primaryDarker,
    size: typography.fontSize[3],
  },
  {
    name: 'warning',
    color: color.error,
    size: typography.fontSize[3],
  },
];
const STYLE: ViewStyle = {
  margin: spacing[4],
  paddingHorizontal: spacing[5],
  backgroundColor: color.palette.gorse,
};
const TEXT_STYLE: TextStyle = {
  color: color.palette.denim,
};
const ICON_STYLE: TextStyle = {
  backgroundColor: color.palette.silverChalice,
};

storiesOf('TextWithIcon', module)
  .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
  .add('Defaults', () => (
    <Story>
      <UseCase text="Text only" usage="Default use case for text only">
        <TextWithIcon text="Lorem ipsum" />
      </UseCase>
      <UseCase text="Text with right icons" usage="Default use case for right icons">
        <TextWithIcon rightIcons={RIGHT_ICONS} text="Lorem ipsum" />
      </UseCase>
      <UseCase text="Text with left icons" usage="Default use case for left icons">
        <TextWithIcon leftIcons={LEFT_ICONS} text="Lorem ipsum" />
      </UseCase>
      <UseCase text="Text with both side icons" usage="Default use case for both side icons">
        <TextWithIcon leftIcons={LEFT_ICONS} rightIcons={RIGHT_ICONS} text="Lorem ipsum" />
      </UseCase>
      <UseCase text="Text with preset" usage="Default use case for a text with preset">
        <TextWithIcon
          leftIcons={LEFT_ICONS}
          rightIcons={RIGHT_ICONS}
          text="Lorem ipsum"
          textPreset="subtitle2"
        />
      </UseCase>
    </Story>
  ))
  .add('Styling', () => (
    <Story>
      <UseCase text="Container" usage="To change the root view style">
        <TextWithIcon
          leftIcons={LEFT_ICONS}
          rightIcons={RIGHT_ICONS}
          style={STYLE}
          text="Lorem ipsum"
        />
      </UseCase>
      <UseCase text="Text" usage="To change the main text style">
        <TextWithIcon
          leftIcons={LEFT_ICONS}
          rightIcons={RIGHT_ICONS}
          text="Lorem ipsum"
          textStyle={TEXT_STYLE}
        />
      </UseCase>
      <UseCase text="Left icon container" usage="To change the left icons view style">
        <TextWithIcon
          leftIconStyle={ICON_STYLE}
          leftIcons={LEFT_ICONS}
          rightIcons={RIGHT_ICONS}
          text="Lorem ipsum"
        />
      </UseCase>
      <UseCase text="Right icon container" usage="To change the right icons view style">
        <TextWithIcon
          leftIcons={LEFT_ICONS}
          rightIconStyle={ICON_STYLE}
          rightIcons={RIGHT_ICONS}
          text="Lorem ipsum"
        />
      </UseCase>
    </Story>
  ));
