/* eslint-disable import/no-extraneous-dependencies */
import React, {PropTypes} from 'react'
import FormBuilderPropTypes from '../../FormBuilderPropTypes'
import {get, filter} from 'lodash'
import Fieldset from 'part:@sanity/components/fieldsets/default'
import Checkbox from 'part:@sanity/components/toggles/checkbox'

export default class ArrayOfStringsSelect extends React.PureComponent {
  static propTypes = {
    type: FormBuilderPropTypes.type,
    value: PropTypes.arrayOf(PropTypes.string),
    level: PropTypes.number,
    onChange: PropTypes.func,
    focus: PropTypes.bool
  }

  static contextTypes = {
    formBuilder: PropTypes.object
  }

  state = {
    hasFocus: this.props.focus,
    focusedItem: null
  }

  handleRemoveItem = index => {
    const nextVal = this.props.value.slice()
    nextVal.splice(index, 1)
    this.props.onChange({
      patch: {
        type: 'set',
        value: nextVal
      }
    })
  }

  handleChange = event => {
    const eventValue = event.target.value
    const {onChange, value} = this.props
    let nextValue = (value && value.slice()) || []
    const hasValue = value && value.find(item => item === eventValue)

    if (hasValue) {
      nextValue = filter(nextValue, item => {
        return item != eventValue
      })
    } else {
      nextValue.push(eventValue)
    }

    onChange({
      patch: {
        type: 'set', value: nextValue
      }
    })
  }

  handleFocus = item => {
    this.setState({
      focusedItem: item
    })
  }

  handleBlur = () => {
    this.setState({
      focusedItem: null
    })
  }

  render() {
    const {type, value, level} = this.props

    const list = get(type, 'options.list')
    const direction = get(type, 'options.direction')

    return (
      <Fieldset legend={type.title} description={type.description} level={level}>
        <div>
          {
            list.map(item => {

              const checked = value && !!value.find(valueItem => valueItem === item.value)

              return (
                <div
                  key={item.value}
                  style={{
                    display: direction == 'horizontal' ? 'inline-block' : 'block',
                    marginRight: direction == 'horizontal' ? '1em' : '0',
                  }}
                >
                  <Checkbox
                    label={item.title}
                    value={item.value}
                    item={item}
                    onChange={this.handleChange}
                    data-key={item.value}
                    checked={checked}
                    onFocus={this.handleFocus}
                    onBlur={this.handleBlur}
                    focus={this.state.focusedItem === item}
                  />
                </div>
              )
            })
          }
        </div>
      </Fieldset>
    )
  }
}

@@ -164,16 +164,8 @@
 %7Bget
-, filter
 %7D fr
@@ -547,505 +547,186 @@
 func
-,%0A    focus: PropTypes.bool%0A  %7D%0A%0A  static contextTypes = %7B%0A    formBuilder: PropTypes.object%0A  %7D%0A%0A  state = %7B%0A    hasFocus: this.props.focus,%0A    focusedItem: null%0A  %7D%0A%0A  handleRemoveItem = index =%3E %7B%0A    const nextVal = this.props.value.slice()%0A    nextVal.splice(index, 1)%0A    this.props.onChange(%7B%0A      patch: %7B%0A        type: 'set',%0A        value: nextVal%0A      %7D%0A    %7D)%0A  %7D%0A%0A  handleChange = event =%3E %7B%0A    const eventValue = event.target.value%0A    const %7BonChange, value%7D = this.props
+%0A  %7D%0A%0A  state = %7B%0A    focusedItem: null%0A  %7D%0A%0A  handleChange = event =%3E %7B%0A    const %7BonChange, type, value = %5B%5D%7D = this.props%0A%0A    const list = get(type, 'options.list')%0A
 %0A    
-le
+cons
 t ne
@@ -739,79 +739,23 @@
 e = 
-(value && value.slice()) %7C%7C %5B%5D%0A    const hasValue = value && value.find
+list%0A      .map
 (ite
@@ -767,86 +767,39 @@
 item
- === eventV
+.v
 alue)%0A
-%0A
     
-if (hasValue) %7B%0A      nextValue = 
+  .
 filter(
-next
+item
 Value
-, item
  =%3E 
@@ -819,75 +819,85 @@
 urn 
-item != eventValue%0A      %7D)%0A    %7D else %7B%0A      nextValue.push(event
+event.target.value === itemValue ? event.target.checked : value.includes(item
 Valu
@@ -903,17 +903,20 @@
 ue)%0A    
-%7D
+  %7D)
 %0A%0A    on
@@ -937,17 +937,36 @@
  patch: 
-%7B
+nextValue.length %3E 0
 %0A       
@@ -962,24 +962,27 @@
 %3E 0%0A        
+? %7B
 type: 'set',
@@ -998,23 +998,42 @@
 extValue
+%7D
 %0A      
+  : %7Btype: 'unset'
 %7D%0A    %7D)
@@ -1541,57 +1541,41 @@
 d = 
+Boolean(
 value
+)
  && 
-!!
 value.
-f
 in
-d(valueItem =%3E valueItem === 
+cludes(
 item
@@ -1722,32 +1722,33 @@
 ay: direction ==
+=
  'horizontal' ? 
@@ -1818,16 +1818,17 @@
 ction ==
+=
  'horizo
@@ -2078,50 +2078,8 @@
 ge%7D%0A
-                    data-key=%7Bitem.value%7D%0A
     

Simplify ArrayOfStringsSelect