import React from 'react'
import cx from 'classnames'
import { Form, Select, Input, Switch, DatePicker, InputNumber, Radio } from 'antd'

import { transformValue, getValidateRules, getValueFromEvent, getTrigger, getValuePropName } from './utils'
import { Upload } from 'mainComponents/Upload'
import { TopicSearchBox } from 'mainComponents/SearchBox'
import styles from './form.styl'

const Option = Select.Option
const FormItem = Form.Item
const RadioButton = Radio.Button
const RadioGroup = Radio.Group
const RangePicker = DatePicker.RangePicker

export function getFormField (property, form, content, layout) {
  const { getFieldDecorator, getFieldsValue, setFieldsValue } = form
  property = {
    visible: () => true,
    disable: () => false,
    valid: () => true,
    ...property
  }
  const formItemLayout = layout === 'horizontal' ? {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 6 }
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 14 }
    }
  } : null
  const values = getFieldsValue()
  const isValid = property.valid(values)
  const InputComponent = getFieldInput(property)
  const InputComponentProps = {
    disabled: property.disable(values),
    setFieldsValue
  }
  let initialValue = getContentValue(content, property.field) === undefined ? property.defaultValue : transformValue(getContentValue(content, property.field), property)
  return (
    isValid ? (
      <FormItem
        { ...formItemLayout }
        className={ cx({ [styles.hidden]: !(property.visible(values)) }) }
        label={ property.title }
        key={ property.field }
      >
        {
          getFieldDecorator(property.field, {
            rules: getValidateRules(property.rules),
            initialValue,
            valuePropName: getValuePropName(property.format),
            trigger: getTrigger(property.format),
            getValueFromEvent: getValueFromEvent(property.format)
          })(
            React.cloneElement(InputComponent, InputComponentProps)
          )
        }
      </FormItem>
    ) : null
  )
}

export function getFieldInput (property) {
  return property.component ? property.component : getCommonFiledInput(property)
}

export function getContentValue (content, field) {
  const paths = field.split('.')
  let value = content
  paths.forEach(path => { value = value[path] })
  return value
}

function getCommonFiledInput (property) {
  let source = property.source
  if (property.source && typeof property.source === 'function') {
    source = property.source()
  }
  // 常用的类型组件
  switch (property.format) {
    case 'Select':
      return (
        <Select>
          {
            source.map(option => <Option key={ option.key } value={ option.value }>{ option.title }</Option>)
          }
        </Select>
      )
    case 'multiple':
      return (
        <Select
          mode='multiple'
          placeholder={ property.placeholder }
        >
          {
            source.map(option => <Option key={ option.key } value={ option.value }>{ option.title }</Option>)
          }
        </Select>
      )
    case 'tags':
      return (
        <Select
          mode='tags'
          placeholder={ property.placeholder }
          style={ { minWidth: 150 } }
        >
          {
            source.map(option => <Option key={ option.key } value={ option.value }>{ option.title }</Option>)
          }
        </Select>
      )
    case 'Input':
      return (
        <Input placeholder={ property.placeholder } />
      )
    case 'TextArea':
      // 该type 2.12 后废弃，请直接使用 Input.TextArea
      return (
        <Input type='textarea' placeholder={ property.placeholder } />
      )
    case 'InputNumber':
      return (
        <InputNumber />
      )
    case 'Switch':
      return (
        <Switch />
      )
    case 'TopicSearchBox':
      return (
        <TopicSearchBox />
      )
    case 'Upload':
      return (
        <Upload />
      )
    case 'DatePicker':
      return (
        <DatePicker format='YYYY-MM-DD HH:mm' showTime disabledDate={ property.disabledDate }  />
      )
    case 'RangePicker':
      return <RangePicker format='YYYY-MM-DD HH:mm' />
    case 'RadioGroup':
      return (
        <RadioGroup>
          {
            source.map(option => <RadioButton key={ option.key } value={ option.value }>{ option.title }</RadioButton>)
          }
        </RadioGroup>
      )
    default:
      return <span>没有对应input 组件</span>
  }
}