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 { TagsGrid } from './tags-grid';

declare let module;

storiesOf('TagsGrid', module)
  .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
  .add('Default', () => (
    <Story>
      <UseCase
        style={{ backgroundColor: color.palette.wildSand }}
        text="Default"
        usage="Default use case"
      >
        <View>
          <TagsGrid
            tags={[
              '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>
          <TagsGrid preset="primary" tags={['lorem', 'ipsum', 'sit', 'amet']} />
        </View>
      </UseCase>
      <UseCase
        style={{ backgroundColor: color.palette.wildSand }}
        text="Multiple presets"
        usage="With a different preset for each chip"
      >
        <View>
          <TagsGrid
            preset={['primary', 'success', 'secondary-accent', 'error']}
            tags={['lorem', 'ipsum', 'sit', 'amet']}
          />
        </View>
      </UseCase>
    </Story>
  ));
