import React from 'react'
import LabeledField from './LabeledField'
import {Field, reduxForm} from 'redux-form'
import * as ToccoUi from 'tocco-ui'
import {asyncValidate} from '../../util/reduxForms'

export const DetailForm = props => {
  if (!props.entity.paths) {
    return <div/>
  }

  const layoutType = 'ch.tocco.nice2.model.form.components.layout.'

  const formTraverser = children => {
    const result = []
    for (let i = 0; i < children.length; i++) {
      const field = children[i]

      if (children[i].type.indexOf(layoutType) === 0) {
        const layoutComponent = field.type.substr(layoutType.length, field.type.length)
        if (layoutComponent === 'HorizontalBox' || layoutComponent === 'VerticalBox') {
          const alignment = layoutComponent === 'HorizontalBox' ? 'horizontal' : 'vertical'
          const label = field.useLabel ? field.label : undefined
          result.push(
            <ToccoUi.LayoutBox key={i} label={label} alignment={alignment}>
              {formTraverser(field.children)}
            </ToccoUi.LayoutBox>
          )
        }
      } else {
        const fieldProperties = props.entity.paths[field.name]
        if (fieldProperties && fieldProperties.value != null) {
          if (fieldProperties.type === 'field') {
            const type = props.entity.paths[field.name].value.type
            result.push(<Field name={field.name} type={type} key={i} label={field.label} component={LabeledField}/>)
          } else if (fieldProperties.type === 'entity') {
            const value = fieldProperties.value.key
            result.push(<Field name={field.name} type="single-select" key={i} label={field.label}
              component={LabeledField} options={{store: [{value, label: fieldProperties.value.display}]}}/>)
          } else if (fieldProperties.type === 'entity-list') {
            const values = fieldProperties.value
            const store = values.map(e => {
              return {value: e.key, label: e.display}
            })
            result.push(<Field name={field.name} type="multi-select" key={i} label={field.label}
              component={LabeledField} options={{store: store}}/>)
          }
        }
      }
    }

    return result
  }

  const handleSubmit = e => {
    props.submitForm()
    e.preventDefault()
  }

  return (
    <form onSubmit={handleSubmit}>
      {formTraverser(props.formDefinition.children)}
      <ToccoUi.Button
        type="submit"
        label="Save"
        icon="glyphicon-floppy-save"
        pending={props.submitting}
        disabled={props.submitting}
        primary
      />
      <div>submitFailed: {props.submitFailed && props.submitFailed.toString()}</div>
      <div>submitSucceeded: {props.submitSucceeded && props.submitSucceeded.toString()}</div>
      <div>anyTouched: {props.anyTouched && props.anyTouched.toString()}</div>
    </form>
  )
}

DetailForm.propTypes = {
  submitForm: React.PropTypes.func.isRequired,
  formDefinition: React.PropTypes.object.isRequired,
  entity: React.PropTypes.object.isRequired,
  submitting: React.PropTypes.bool,
  submitFailed: React.PropTypes.bool,
  submitSucceeded: React.PropTypes.bool,
  anyTouched: React.PropTypes.bool
}

export default reduxForm({
  form: 'detailForm',
  destroyOnUnmount: false,
  asyncValidate
})(DetailForm)


@@ -1111,31 +1111,27 @@
   const 
-fieldProperties
+entityField
  = props
@@ -1172,42 +1172,34 @@
 if (
-fieldProperties && fieldProperties
+entityField && entityField
 .val
@@ -1222,20 +1222,20 @@
         
-if (
+let 
 fieldPro
@@ -1227,38 +1227,64 @@
    let fieldProp
-erties
+s = %7B%7D%0A          if (entityField
 .type === 'field
@@ -1304,436 +1304,182 @@
     
-const type = props.entity.paths%5Bfield.name%5D.value.type%0A            result.push(%3CField name=%7Bfield.name%7D type=%7Btype%7D key=%7Bi%7D label=%7Bfield.label%7D component=%7BLabeledField%7D/%3E)%0A          %7D else if (fieldProperties.type === 'entity') %7B%0A            const value = fieldProperties.value.key%0A            result.push(%3CField name=%7Bfield.name%7D type=%22single-select%22 key=%7Bi%7D label=%7Bfield.label%7D%0A              component=%7BLabeledField%7D 
+fieldProps.type = entityField.value.type%0A          %7D else if (entityField.type === 'entity') %7B%0A            fieldProps.type = 'single-select'%0A            fieldProps.
 options
-=%7B
+ = 
 %7Bsto
@@ -1493,32 +1493,51 @@
 alue
-, label: fieldProperties
+: entityField.value.key, label: entityField
 .val
@@ -1549,20 +1549,16 @@
 splay%7D%5D%7D
-%7D/%3E)
 %0A       
@@ -1571,31 +1571,27 @@
 lse if (
-fieldProperties
+entityField
 .type ==
@@ -1625,44 +1625,40 @@
     
-const values = fieldProperties.value
+fieldProps.type = 'multi-select'
 %0A   
@@ -1684,14 +1684,25 @@
 e = 
+entityField.
 value
-s
 .map
@@ -1711,31 +1711,9 @@
  =%3E 
-%7B%0A              return 
+(
 %7Bval
@@ -1740,16 +1740,18 @@
 display%7D
+))
 %0A       
@@ -1759,23 +1759,60 @@
     
-%7D)%0A
+fieldProps.options = %7Bstore%7D%0A  
       
+  %7D%0A%0A
       
+    
 resu
@@ -1847,28 +1847,8 @@
 ame%7D
- type=%22multi-select%22
  key
@@ -1871,30 +1871,16 @@
 d.label%7D
-%0A             
  compone
@@ -1901,47 +1901,26 @@
 ld%7D 
-options=%7B%7Bstore: store%7D%7D/%3E)%0A          %7D
+%7B...fieldProps%7D/%3E)
 %0A   

simplify if-else-statement