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

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

const TestWrap = ({ children }) => (<form>{children}</form>);

const RFWrap = reduxForm({
  form: 'rf-wrap2',
})(TestWrap);

const props = ({
  isFormVariant = undefined,
  isFloatErrorVariant = undefined,
  isClick = undefined,
  isDisabled = undefined,
  isHeaderStretchWidth = undefined,
  isMenuHeaderWidth = undefined,
  isCloseOnSelect = undefined,
  isInWidget = undefined,
  infoMessage = undefined,
  tooltipPosition = undefined,
  placeholder = undefined,
  list = undefined,
  itemKey = undefined,
  activeItem = 2,
  activeItems = undefined,
  searchQuery = undefined,
  fieldName = undefined,
  // onItemClick = undefined,
  // onSearch = undefined,
  // onToggleDropdownCb = 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),
  isCloseOnSelect: boolean('isCloseOnSelect', isCloseOnSelect),
  isInWidget: boolean('isInWidget', isInWidget),
  infoMessage: text('infoMessage', infoMessage),
  tooltipPosition: radios('tooltip position', tooltipPositions, tooltipPosition),
  placeholder: text('placeholder', placeholder),
  list: array('list', [1, 2, 3, 4]),
  itemKey: text('itemKey', itemKey),
  activeItem: text('activeItem', activeItem),
  // activeItems,
  searchQuery: text('searchQuery', searchQuery),
  fieldName: text('fieldName', fieldName),
  // onItemClick
  // onSearch
  // onToggleDropdownCb
  asyncStatus: select('async status', asyncStates({ isList: false }), asyncStatus),
  asyncStatusList: select('async status list', asyncStates({ isList: true }), asyncStatusList),
});

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