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

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

import { ChipsGrid } from './chips-grid';

declare let module;

storiesOf('ChipsGrid', module)
  .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
  .add('Default', () => (
    <Story>
      <UseCase
        style={{ backgroundColor: color.palette.wildSand }}
        text="Default"
        usage="Default use case"
      >
        <View>
          <ChipsGrid
            chips={[
              'lorem',
              'ipsum',
              'sit',
              'amet',
              'consecteur',
              'adipiscing',
              'elit',
              'tincidunt',
              'sapien',
            ]}
          />
        </View>
      </UseCase>
      <UseCase
        style={{ backgroundColor: color.palette.wildSand }}
        text="Primary"
        usage="With primary preset for all chips"
      >
        <View>
          <ChipsGrid chips={['lorem', 'ipsum', 'sit', 'amet']} preset="primary" />
        </View>
      </UseCase>
      <UseCase
        style={{ backgroundColor: color.palette.wildSand }}
        text="Multiple presets"
        usage="With a different preset for each chip"
      >
        <View>
          <ChipsGrid
            chips={['lorem', 'ipsum', 'sit', 'amet']}
            preset={['primary', 'success', 'secondary', 'error']}
          />
        </View>
      </UseCase>
      <UseCase
        style={{ backgroundColor: color.palette.white }}
        text="With title"
        usage="With a top title"
      >
        <View>
          <ChipsGrid
            chips={[
              'Area 51',
              'Space 12_A',
              'BCN_XYZ1',
              'Area_14B',
              'BCN_XYZ1',
              'Area_14B',
              'Area_14C',
              'Mad_ALPZ2',
            ]}
            title="Eligible spaces for this package:"
          />
        </View>
      </UseCase>
    </Story>
  ));
