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

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

import { Icon } from './icon';
import { PaackIcons } from './PaackIcon';
import PaackIconsGlyphs from './PaackIcon/glyphmaps/Paack.json';

declare let module;

const Icons = Object.keys(PaackIconsGlyphs).map((icon) => (
  <UseCase key={icon} text={`"${icon}" icon`} usage="For anything you want.">
    <Icon color={color.palette.ebony} name={icon as PaackIcons} size={20} />
  </UseCase>
));

storiesOf('Icon', module)
  .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
  .add('Icons', () => <Story>{Icons}</Story>)
  .add('Style Presets', () => (
    <Story>
      <UseCase text="Default" usage="The default preset.">
        <Icon name="person" preset="default" size={20} />
      </UseCase>
      <UseCase text="Success" usage="The success preset.">
        <Icon name="checkmark" preset="success" size={20} />
      </UseCase>
      <UseCase text="Error" usage="The error preset.">
        <Icon name="close" preset="error" size={20} />
      </UseCase>
      <UseCase text="Warning" usage="The warning preset.">
        <Icon name="warning" preset="warning" size={20} />
      </UseCase>
      <UseCase text="Big size" usage="The icon with size 200">
        <Icon name="logo-paack-combined-color" preset="default" size={200} />
      </UseCase>
    </Story>
  ));
