import React from 'react';
import {storiesOf} from '@storybook/react';
import {action} from '@storybook/addon-actions';
import {boolean, object, text} from '@storybook/addon-knobs';

import MultiSelect from '../../Components/MultiSelect/src';

export default storiesOf('Components | MultiSelect', module)
  .add('default', () => (
    <MultiSelect
      onChange={action('onChanged')}
      elementId={text('id', 'element-id')}
      options={[{value: 1, label: 'label-1'}, {value: 2, label: 'label-2'}]}
      isDisabled={boolean('Disabled', false)}
      backspaceRemovesValue={boolean('Backspace Removes Value', false)}
      closeMenuOnSelect={boolean('Close Menu On Select', false)}
      customStyles={object('Custom styles', {})}
      hideSelectedOptions={boolean('Hide Selected Options', false)}
      isClearable={boolean('Clearable', false)}
      isLoading={boolean('Loading', false)}
      isMulti={boolean('Multi', false)}
      isRtl={boolean('Rtl', false)}
      isSearchable={boolean('Searchable', false)}
    />
  ));