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

import ButtonDropDown, {BUTTON_DROPDOWN_TYPE} from '../../Components/ButtonDropDown/src';

const OPTIONS = [{
  id: 'button-drop-down-0',
  title: 'ButtonDropDown Value 1',
}, {
  id: 'button-drop-down-1',
  title: 'ButtonDropDown Value 2',
}, {
  id: 'button-drop-down-2',
  title: 'ButtonDropDown Value 3',
}];

export default storiesOf('Components | ButtonDropDown', module)
  .add('default view', () => (
    <ButtonDropDown
      options={OPTIONS}
      elementId="button-drop-down"
      title={text('Title', 'Lorem ipsum dolor sit amet')}
      type={select('Type', Object.values(BUTTON_DROPDOWN_TYPE), BUTTON_DROPDOWN_TYPE.ADVANCED)}
      onClick={(value) => action(value.id)}
    />
  ));