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

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

import { Bullet } from './bullet';

declare let module;

const CUSTOM_STYLE: ViewStyle = {
  borderColor: color.palette.redRibbon,
  borderStyle: 'solid',
  borderWidth: 1,
};

storiesOf('Bullet', module)
  .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
  .add('Default', () => (
    <Story>
      <UseCase center text="Default" usage="Default use case">
        <Bullet />
      </UseCase>
      <UseCase center text="Sized" usage="Default use case">
        <Bullet size={typography.fontSize[3]} />
      </UseCase>
      <UseCase center text="Styled" usage="With a custom style">
        <Bullet preset="success" size={typography.fontSize[3]} style={CUSTOM_STYLE} />
      </UseCase>
    </Story>
  ))
  .add('Style Presets', () => (
    <Story>
      <UseCase center text="Primary" usage="Primary use case">
        <Bullet preset="primary" />
      </UseCase>
      <UseCase center text="Secondary" usage="Secondary use case">
        <Bullet preset="secondary" />
      </UseCase>
      <UseCase center text="Success" usage="Success use case">
        <Bullet preset="success" />
      </UseCase>
      <UseCase center text="Warning" usage="Warning use case">
        <Bullet preset="warning" />
      </UseCase>
      <UseCase center text="Error" usage="Error use case">
        <Bullet preset="error" />
      </UseCase>
    </Story>
  ));
