import React from 'react'
import {intlShape} from 'react-intl'

import {Button} from 'tocco-ui'

import {formField as formFieldUtil} from 'tocco-util'
import formFieldMapping from '../../../../util/detailView/formFieldMapping'

const SearchForm = props => {
  const handleResetClick = () => {
    props.reset()
  }

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

  const msg = id => (props.intl.formatMessage({id}))

  const isHidden = name => {
    const field = props.preselectedSearchFields.find(f => f.id === name)
    return field && field.hidden
  }

  const shouldRenderField = name => (
    !isHidden(name) && (
    props.disableSimpleSearch || props.showExtendedSearchForm || props.simpleSearchFields.includes(name))
  )

  const toggleExtendedSearchForm = () => {
    props.setShowExtendedSearchForm(!props.showExtendedSearchForm)
  }

  return (
    <form onSubmit={handleSubmit} className="form-horizontal">
      {
        props.searchFormDefinition.map(formDefinitionField => {
          const fieldName = formDefinitionField.name
          if (shouldRenderField(fieldName)) {
            const modelField = props.entityModel[fieldName]
            const value = props.searchInputs ? props.searchInputs[fieldName] : undefined
            const utils = {
              relationEntities: props.relationEntities,
              loadRelationEntity: props.loadRelationEntity
            }
            const onChange = value => props.setSearchInput(fieldName, value)

            const fomFieldData = {
              formDefinitionField,
              modelField,
              id: fieldName,
              value,
              onChange,
              utils
            }

            return formFieldUtil.formFieldFactory(formFieldMapping, fomFieldData)
          }
        }
        )
      }

      {!props.disableSimpleSearch
      && <div className="pull-right">
        <Button
          type="button"
          label={msg('client.entity-browser.extendedSearch')}
          onClick={toggleExtendedSearchForm}
        />
      </div>
      }
      <div className="form-group row">
        <div className="col-sm-10">
          <div className="btn-toolbar">
            <Button
              type="submit"
              icon="glyphicon-search"
              label={msg('client.entity-browser.search')}
              primary
            />
            <Button
              type="button"
              icon="glyphicon-repeat"
              label={msg('client.entity-browser.reset')}
              onClick={handleResetClick}
            />
          </div>
        </div>
      </div>
    </form>
  )
}

SearchForm.propTypes = {
  intl: intlShape.isRequired,
  entityModel: React.PropTypes.objectOf(
    React.PropTypes.shape({
      type: React.PropTypes.string.isRequired,
      targetEntity: React.PropTypes.string
    })
  ).isRequired,
  searchFormDefinition: React.PropTypes.arrayOf(
    React.PropTypes.shape({
      name: React.PropTypes.string.isRequired,
      type: React.PropTypes.string.isRequired,
      displayType: React.PropTypes.string.isRequired,
      label: React.PropTypes.string.isRequired,
      useLabel: React.PropTypes.string.isRequired
    })
  ).isRequired,
  setSearchInput: React.PropTypes.func.isRequired,
  relationEntities: React.PropTypes.shape({
    entityName: React.PropTypes.shape({
      loaded: React.PropTypes.bool,
      data: React.PropTypes.arrayOf(
        React.PropTypes.shape({
          value: React.PropTypes.string,
          label: React.PropTypes.string
        })
      )
    })
  }).isRequired,
  loadRelationEntity: React.PropTypes.func.isRequired,
  searchInputs: React.PropTypes.objectOf(React.PropTypes.any),
  reset: React.PropTypes.func.isRequired,
  disableSimpleSearch: React.PropTypes.bool,
  simpleSearchFields: React.PropTypes.arrayOf(
    React.PropTypes.string
  ),
  showExtendedSearchForm: React.PropTypes.bool,
  setShowExtendedSearchForm: React.PropTypes.func,
  preselectedSearchFields: React.PropTypes.arrayOf(
    React.PropTypes.shape({
      id: React.PropTypes.string.isRequired,
      value: React.PropTypes.any.isRequired,
      hidden: React.PropTypes.bool.isRequired
    })
  )
}

export default SearchForm

@@ -1844,44 +1844,37 @@
     
-%7B!props.disableSimpleSearch
+%3Cdiv className=%22row%22%3E
 %0A      
-&&
+ 
  %3Cdi
@@ -1890,21 +1890,35 @@
 me=%22
-pull-right
+col-sm-8 col-sm-push-4
 %22%3E%0A
+  
     
@@ -1935,38 +1935,78 @@
 n%0A          
+  
 type=%22
-button%22%0A
+submit%22%0A            icon=%22glyphicon-search%22%0A  
           la
@@ -2041,17 +2041,9 @@
 ser.
-extendedS
+s
 earc
@@ -2061,192 +2061,31 @@
     
-onClick=%7BtoggleExtendedSearchForm%7D%0A        /%3E%0A      %3C/div%3E%0A      %7D%0A      %3Cdiv className=%22form-group row%22%3E%0A        %3Cdiv className=%22col-sm-10%22%3E%0A          %3Cdiv className=%22btn-toolbar%22%3E%0A  
+  primary%0A          /%3E%0A
     
@@ -2106,38 +2106,36 @@
             
-  
 type=%22
-submit
+button
 %22%0A          
@@ -2128,34 +2128,32 @@
 on%22%0A            
- 
- 
 icon=%22glyphicon-
@@ -2148,34 +2148,32 @@
 =%22glyphicon-
-search%22%0A  
+repeat%22%0A
             
@@ -2198,38 +2198,37 @@
 .entity-browser.
-search
+reset
 ')%7D%0A            
@@ -2231,121 +2231,168 @@
     
-  primary%0A            /%3E%0A            %3CButton%0A              type=%22button%22%0A              icon=%22glyphicon-repeat%22%0A  
+onClick=%7BhandleResetClick%7D%0A          /%3E%0A          %7B!props.disableSimpleSearch%0A          && %3CButton%0A            className=%22pull-right%22%0A            type=%22button%22%0A
     
@@ -2429,35 +2429,42 @@
 ity-browser.
-reset
+extendedSearch
 ')%7D%0A
-  
             
@@ -2472,36 +2472,42 @@
 nClick=%7B
-handleResetClick%7D%0A  
+toggleExtendedSearchForm%7D%0A
         
@@ -2517,30 +2517,25 @@
 %3E%0A          
-%3C/div%3E
+%7D
 %0A        %3C/d

align buttons in search form