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

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

import { Chip } from './chip';

declare let module;

const CONTAINER: ViewStyle = {
  alignItems: 'center',
};

storiesOf('Chip', module)
  .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
  .add('Presets', () => (
    <Story>
      <UseCase style={CONTAINER} text="Primary" usage="Using primary preset">
        <Chip preset="primary" text="Area 51" />
      </UseCase>
      <UseCase style={CONTAINER} text="Secondary" usage="Using secondary preset">
        <Chip preset="secondary" text="Space 12_A" />
      </UseCase>
      <UseCase style={CONTAINER} text="Success" usage="Using success preset">
        <Chip preset="success" text="BCN_XYZ1" />
      </UseCase>
      <UseCase style={CONTAINER} text="Warning" usage="Using warning preset">
        <Chip preset="warning" text="Area_14B" />
      </UseCase>
      <UseCase style={CONTAINER} text="Error" usage="Using error preset">
        <Chip preset="error" text="MAD_ALPZ2" />
      </UseCase>
    </Story>
  ))
  .add('Default', () => (
    <Story>
      <UseCase style={CONTAINER} text="No fill" usage="Without background color">
        <Chip noFill preset="secondary" text="Area 51" />
      </UseCase>
    </Story>
  ));
