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

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

const props = ({
  isFormVariant = undefined,
  isFloatErrorVariant = undefined,
  isClick = undefined,
  isDisabled = undefined,
  isHeaderStretchWidth = undefined,
  isMenuHeaderWidth = undefined,
  isMenuHeaderWidthMin = undefined,
  isIcon = undefined,
  isCloseOnSelect = undefined,
  isInWidget = undefined,
  infoMessage = undefined,
  tooltipPosition = undefined,
  domScrollSelector = undefined,
  placeholder = undefined,
  list = undefined,
  itemKey = undefined,
  activeItem = 2,
  activeItems = undefined,
  activeItemRaw = undefined,
  fieldName = undefined,
  onItemClick = undefined,
  asyncStatus = undefined,
  asyncStatusList = undefined,
} = {}) => ({
  isFormVariant: boolean('isFormVariant', isFormVariant),
  isFloatErrorVariant: boolean('isFloatErrorVariant', isFloatErrorVariant),
  isClick: boolean('isClick', isClick),
  isDisabled: boolean('isDisabled', isDisabled),
  isHeaderStretchWidth: boolean('isHeaderStretchWidth', isHeaderStretchWidth),
  isMenuHeaderWidth: boolean('isMenuHeaderWidth', isMenuHeaderWidth),
  isMenuHeaderWidthMin: boolean('isMenuHeaderWidthMin', isMenuHeaderWidthMin),
  isIcon: boolean('isIcon', isIcon),
  isCloseOnSelect: boolean('isCloseOnSelect', isCloseOnSelect),
  isInWidget: boolean('isInWidget', isInWidget),
  infoMessage: text('infoMessage', infoMessage),
  tooltipPosition: radios('tooltip position', tooltipPositions, tooltipPosition),
  domScrollSelector: text('domScrollSelector', domScrollSelector),
  placeholder: text('placeholder', placeholder),
  list: array('list', [1, 2, 3, 4]),
  itemKey: text('itemKey', itemKey),
  activeItem: text('activeItem', activeItem),
  // activeItems,
  activeItemRaw: text('activeItemRaw', activeItemRaw),
  fieldName: text('fieldName', fieldName),
  // onItemClick
  asyncStatus: select('async status', asyncStates({ isList: false }), asyncStatus),
  asyncStatusList: select('async status list', asyncStates({ isList: true }), asyncStatusList),
});

storiesOf('Web|Dropdown', module)
  .add('Simple', () => (
    <Simple {...props()} />
  ))
  .add('Simple stretch', () => (
    <Simple {...props({
      isHeaderStretchWidth: true,
      isMenuHeaderWidth: true,
    })} />
  ))
  .add('Simple form variant', () => (
    <Simple {...props({
      isFormVariant: true,
      isHeaderStretchWidth: true,
      isMenuHeaderWidth: true,
    })} />
  ))
