import React from 'react';
import { storiesOf } from '@storybook/react';
import { boolean, select, text, radios } from '@storybook/addon-knobs';
import { asyncStates, tooltipPositions } from '../../../storybook/utils';
import { RelativeInlineWrap } from '../../../storybook/components';
import { ErrorFloat } from '../index';

const props = ({
  isInfoVariant = undefined,
  isInfoVariantMaybe = undefined,
  hasAsyncStatus = undefined,
  infoMessage = undefined,
  tooltipPosition = undefined,
  asyncStatus = undefined,
  asyncStatusList = undefined,
} = {}) => ({
  isInfoVariant: boolean('is info variant', isInfoVariant),
  isInfoVariantMaybe: boolean('is info variant maybe', isInfoVariantMaybe),
  hasAsyncStatus: boolean('has async status', hasAsyncStatus),
  infoMessage: text('info message', infoMessage),
  tooltipPosition: radios('tooltip position', tooltipPositions, tooltipPosition),
  asyncStatus: select('async status', asyncStates({ isList: false }), asyncStatus),
  asyncStatusList: select('async status list', asyncStates({ isList: true }), asyncStatusList),
});

storiesOf('Web|Error', module)
  .add('float', () => (
    <RelativeInlineWrap>
      <ErrorFloat {...props()} />
    </RelativeInlineWrap>
  ))
