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

import { asyncStates, tooltipPositions } from '../../storybook/utils';
import { Button } from './index';

const props = ({
  isDisabled = undefined,
  isFormButton = undefined,
  isLinkButton = undefined,
  tooltipPosition = undefined,
  hasAsyncStatus = undefined,
  asyncStatus = undefined,
  asyncStatusList = undefined,
  children = undefined,
  onClick = undefined,
} = {}) => ({
  isDisabled: boolean('isDisabled', isDisabled),
  isFormButton: boolean('isFormButton', isFormButton),
  isLinkButton: boolean('isLinkButton', isLinkButton),
  tooltipPosition: radios('tooltipPosition', tooltipPositions, tooltipPosition),
  hasAsyncStatus: boolean('hasAsyncStatus', hasAsyncStatus),
  asyncStatus: select('asyncStatus', asyncStates({ isList: false }), asyncStatus),
  asyncStatusList: select('asyncStatusList', asyncStates({ isList: true }), asyncStatusList),
  children: text('children', children),
  onClick: button('onClick', action('clicked', onClick)),
});

storiesOf('Web|Button', module)
  .addParameters({
    info: 'sharedTouchDevice',
  })
  .add('Button', () => (
    <Button {...props({ children: 'Default button' })} />
  ));
