import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { boolean, button, select, radios } from '@storybook/addon-knobs';
import {
  SHAPE_ASYNC_STATUS_INITIAL,
  SHAPE_ASYNC_STATUS_REQUESTED,
  IS_ERROR,
  ERROR_MESSAGE,
} from '@vincent_za/utils';

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

const props = ({
  isDisabled = undefined,
  isFormButton = undefined,
  isLinkButton = undefined,
  tooltipPosition = undefined,
  // hasAsyncStatus = undefined,
  // asyncStatus = undefined,
  // asyncStatusList = undefined,
  onClick = undefined,
} = {}) => ({
  isDisabled: boolean('is disabled', isDisabled),
  isFormButton: boolean('is form variant', isFormButton),
  isLinkButton: boolean('is link variant', isLinkButton),
  tooltipPosition: radios('tooltip position', tooltipPositions, tooltipPosition),
  // hasAsyncStatus: boolean('has async status', hasAsyncStatus),
  // asyncStatus: select('async status', asyncStates({ isList: false }), asyncStatus),
  // asyncStatusList: select('async status list', asyncStates({ isList: true }), asyncStatusList),
  onClick: button('onClick', action('clicked', onClick)),
});

storiesOf('Shared|Button', module)
  .add('default', () => (
    <Button {...props()}>default</Button>
  ))
  .add('isLink', () => (
    <Button {...props({ isLinkButton: true })}>link</Button>
  ))
  .add('isForm', () => (
    <Button {...props({ isFormButton: true, onClick() {} })}>form</Button>
  ))
  .add('isForm isDisabled', () => (
    <Button {...props({ isFormButton: true, isDisabled: true })}>form disabled</Button>
  ))
  // .add('isForm isBusy', () => (
  //   <Button {...props({
  //     isFormButton: true,
  //     hasAsyncStatus: true,
  //     asyncStatus: SHAPE_ASYNC_STATUS_REQUESTED,
  //   })}>
  //     form busy
  //   </Button>
  // ))
  // .add('isForm isError', () => (
  //   <Button {...props({
  //     isFormButton: true,
  //     hasAsyncStatus: true,
  //     asyncStatus: { ...SHAPE_ASYNC_STATUS_INITIAL, [IS_ERROR]: true, [ERROR_MESSAGE]: 'error message' }
  //   })}>
  //     form error
  //   </Button>
  // ))
  // .add('isForm isError', () => (
  //   <Button {...props({
  //     isFormButton: true,
  //     hasAsyncStatus: true,
  //     asyncStatus: { ...SHAPE_ASYNC_STATUS_INITIAL, [IS_ERROR]: true, [ERROR_MESSAGE]: 'error message' }
  //   })}>
  //     form error
  //   </Button>
  // ))
