import React from 'react'
import PropTypes from 'prop-types'
import {storiesOf} from '@storybook/react'
import {action} from '@storybook/addon-actions'
import {withKnobs, boolean} from '@storybook/addon-knobs'

import Select from './'
import {Select as Raw} from './Select'

const options = [
  {key: 1, display: 'Option 1'},
  {key: 2, display: 'Option 2'},
  {key: 3, display: 'Option 3'},
  {key: 4, display: 'Option 4'},
  {key: 5, display: 'Option 5'}
]

export class SelectStory extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      isLoading: false,
      options: null,
      value: [{key: 3, display: 'Option 3'}],
      moreOptionsAvailable: false,
      tooltips: {}
    }
  }

  fetchOptions = () => {
    if (this.state.options === null) {
      this.setState({...this.state, options: null, isLoading: true})
      setTimeout(() => { this.setState({...this.state, options, isLoading: false}) }, this.props.delay || 0)
    }
  }

  searchOptions = () => {
    this.setState({...this.state, options: null, isLoading: true})
    setTimeout(() => {
      this.setState({
        ...this.state,
        options: options.filter((e, idx) => idx % 2 === 0),
        isLoading: false,
        moreOptionsAvailable: true
      })
    }, this.props.delay || 0)
  }

  setValue = value => {
    this.setState({...this.state, value})
  }

  loadToolTip = key => {
    if (!this.state.tooltips[key]) {
      this.setState({...this.state, tooltips: {...this.state.tooltips, [key]: `TOOL TIP ${key}`}})
    }
  }

  render() {
    return (
      <span>
        <Select
          isMulti={this.props.isMulti}
          fetchOptions={this.fetchOptions}
          searchOptions={this.searchOptions}
          options={this.state.options}
          isLoading={this.state.isLoading}
          onChange={this.setValue}
          value={this.state.value}
          noResultsText="No more options."
          moreOptionsAvailable={this.state.moreOptionsAvailable}
          moreOptionsAvailableText="More options available"
          openAdvancedSearch={action('open advanced search')}
          tooltips={this.state.tooltips}
          loadTooltip={this.loadToolTip}
        />
      </span>
    )
  }
}

SelectStory.propTypes = {
  isMulti: PropTypes.bool,
  delay: PropTypes.number
}

storiesOf('Select', module)
  .addDecorator(withKnobs)
  .add(
    'Select',
    () => <SelectStory isMulti={boolean('isMulti', true)} delay={2000} action={action}/>,
    {info: {propTables: [Raw], propTablesExclude: [SelectStory], source: false}}
  )

@@ -1600,47 +1600,8 @@
 ect%0A
-          isMulti=%7Bthis.props.isMulti%7D%0A
     
@@ -1653,237 +1653,120 @@
     
-searchOptions=%7Bthis.searchOptions%7D%0A          options=%7Bthis.state.options%7D%0A          isLoading=%7Bthis.state.isLoading%7D%0A          onChange=%7Bthis.setValue%7D%0A          value=%7Bthis.state.value%7D%0A          noResultsText=%22No more options.%22
+isLoading=%7Bthis.state.isLoading%7D%0A          isMulti=%7Bthis.props.isMulti%7D%0A          loadTooltip=%7Bthis.loadToolTip%7D
 %0A   
@@ -1887,16 +1887,94 @@
 ilable%22%0A
+          noResultsText=%22No more options.%22%0A          onChange=%7Bthis.setValue%7D%0A
         
@@ -2037,23 +2037,22 @@
         
-tooltip
+option
 s=%7Bthis.
@@ -2061,57 +2061,177 @@
 ate.
-tooltips%7D%0A          loadT
+options%7D%0A          readOnly=%7Bthis.props.readOnly%7D%0A          searchOptions=%7Bthis.searchOptions%7D%0A          t
 ooltip
+s
 =%7Bthis.
-loadToolT
+state.toolt
 ip
+s%7D%0A          value=%7Bthis.state.value
 %7D%0A  
@@ -2292,16 +2292,43 @@
 pes = %7B%0A
+  delay: PropTypes.number,%0A
   isMult
@@ -2348,20 +2348,23 @@
 bool,%0A  
-dela
+readOnl
 y: PropT
@@ -2368,22 +2368,20 @@
 opTypes.
-number
+bool
 %0A%7D%0A%0Astor
@@ -2462,16 +2462,22 @@
    () =%3E
+%0A     
  %3CSelect
@@ -2485,72 +2485,148 @@
 tory
- isMulti=%7Bboolean('isMulti', true)%7D delay=%7B2000%7D action=%7Baction%7D
+%0A        action=%7Baction%7D%0A        delay=%7B2000%7D%0A        isMulti=%7Bboolean('isMulti', true)%7D%0A        readOnly=%7Bboolean('readOnly', true)%7D%0A      
 /%3E,%0A

extend story of Select