import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { DropDown, AddNewButtonDropDown, OtherDropDownApp } from './index'
import {
  text,
  boolean,
  number,
  object,
  array,
  date,
  button
} from '@storybook/addon-knobs/react';
import { selectV2 } from '@storybook/addon-knobs';
import { withInfo } from '@storybook/addon-info';
import { linkTo } from '@storybook/addon-links';

const items = [
  { value: 1, label: 'one' }, { value: 2, label: 'two' }, { value: 3, label: 'three' }
]

const getData = val => items.filter(el => el.label.indexOf(val) > -1)

class Wrap extends React.Component {
  constructor() {
    super()
    this.state = {
      items: [],
      loading: false
    }
  }

  getData = val => {
    this.setState({ loading: true })
    setTimeout(() => this.setState({
      items: getData(val),
      loading: false
    }), 2000)
  }

  render() {
    return (
      <DropDown
        multiple
        items={this.state.items}
        loading={this.state.loading}
        serverSideSearch
        fetchItems={this.getData}
        onChange={action('on Change')}
      />
    )
  }
}

storiesOf('DropDown', module)
  .add('Simple DropDown',
    withInfo('This is a wrapper over React Select - onChange return an array with the selected object')(
      () => (
        <DropDown
          items={object('items', items)}
          placeholder={text('Placeholder', 'Waka Waka')}
          onChange={action('on Change')}
        />
      )
    ))
  .add('MultiSelect DropDown with label',
    withInfo('MultiSelect DropDown - onChange returns an array of selected options')(
      () => (
        <DropDown
          items={object('items', items)}
          multiple
          placeholder={text('Placeholder', 'Waka Waka')}
          label={text('Label', 'Hello')}
          onChange={action('on Change')}
        />
      )
    ))
  .add('DropDown with initial value , not clearable',
    withInfo('clearable controls if the dropdown input can be cleared or not')(
      () => (
        <DropDown
          items={object('items', items)}
          clearable={boolean('clearable:', false)}
          value={[{ value: 1, label: 'one' }]}
          label={text('Label', 'Hello')}
          onChange={action('on Change')}
        />
      )
    ))
  .add('DropDown with default value set',
    withInfo('If setDefaultItem is a prop and the item array has length 1, that item gets set as the selected. Remove all but one item on the items in knob to see it in action')(
      () => (
        <DropDown
            items={object('items', items)}
            placeholder={text('Placeholder', 'Waka Waka')}
            setDefaultItem
            onChange={action('on Change')}
        />
      )
    ))
  .add('DropDown serverSide',
    withInfo('The Wrap component mocks api calls. The callback fetchItems takes as input the entered text and is supposed to call the api')(
      () => (
        <Wrap />
      )
    ))
  .add('AddNewButtonDropDown',
    withInfo('Change the items to an empty array to see the button')(
      () => (
        <AddNewButtonDropDown
          items={object('items', items)}
          label='Label'
          onChange={action('on Change')}
          addNewButtonLabel='Add new Stuff'
          addNewButtonOnClick={() => alert('ok')}
        />
      )
    ))
  .add('DropDown with Other and label',
    withInfo('Other DropDown - Has a constant field which on select will return an input box where you can type the required option and onChange either an array of either one of the selected items or the input give in the text box')(
      () => (
        < OtherDropDownApp
          items={object('Items', items)}
          dropDownplaceholder={text('Placeholder', 'Waka Waka')}
          Inputplaceholder={text('Placeholder', 'Waka Waka')}
          constantText={text('Constant Text', 'Others')}
          dropDownlabel={text('Dropdown label', 'Drop Down')}
          inputLabel={text('Input label', 'Input')}
          onChange={action('on Change')}
        />
      )
    ))