import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';

import Selector from './selector';

storiesOf('Selector', module)
  .add('Selector', () => (
    <Selector
      options={[
        { value: 1, label: 'Lor' },
        { value: 2, label: 'Lorem' },
        { value: 3, label: 'Lorem i' },
        { value: 4, label: 'Lorem ips' },
        { value: 5, label: 'Lorem ipsum' },
        { value: 6, label: 'Lorem ipsum d' },
        { value: 7, label: 'Lorem ipsum dol' },
        { value: 8, label: 'Lorem ipsum dolor' },
        { value: 9, label: 'Lorem ipsum dolor s' },
        { value: 0, label: 'Lorem ipsum dolor sit' },
      ]}
      onChange={action('select')}
    />
  ))
  .add('Selector Disabled', () => (
    <Selector
      disabled
      options={[
        { value: 1, label: 'Lor' },
        { value: 2, label: 'Lorem' },
      ]}
      onChange={action('select')}
    />
  ))
  .add('Selector Small', () => (
    <Selector
      small
      options={[
        { value: 1, label: 'Lor' },
        { value: 2, label: 'Lorem' },
        { value: 3, label: 'Lorem i' },
        { value: 4, label: 'Lorem ips' },
        { value: 5, label: 'Lorem ipsum' },
        { value: 6, label: 'Lorem ipsum d' },
        { value: 7, label: 'Lorem ipsum dol' },
        { value: 8, label: 'Lorem ipsum dolor' },
        { value: 9, label: 'Lorem ipsum dolor s' },
        { value: 0, label: 'Lorem ipsum dolor sit' },
      ]}
      onChange={action('select')}
    />
  ));
