import React from 'react';
import { Form } from 'antd';
import Input from './input-field';
import TextArea from './text-area';
import Select from './select-field';
import Radio from './radio-field';
import DatePicker from './date-picker';
import RangePicker from './range-picker';
import Cascader from './cascader-field';
import RegionNumber from './region-number';
import SingleImgField from './single-img-field';
import styles from './styles.less';

function FormItem(props) {
  const {
    type = 'input',
    label,
    name,
    currentVal = '',
    form = {},
    decoratorOpts,
    formItemProps = {},
    itemConfig = {},
    onChange,
  } = props;
  // console.log('FormItem props', props);
  itemConfig.placeholder = itemConfig.placeholder || '请输入' + label;
  itemConfig.type = itemConfig.type || type;

  const getFieldDecorator = form.getFieldDecorator;
  const getFieldValue = form.getFieldValue;
  const useDecorator = getFieldDecorator && typeof getFieldDecorator === 'function';

  return (
    <Form.Item {...formItemProps} className={styles.formItem} label={label}>
      {useDecorator ? (
        getFieldDecorator(name, {
          // initialValue: getFieldValue(name) || currentVal,
          initialValue: currentVal,
          ...decoratorOpts,
        })(
          <ItemDom
            form={form}
            onChange={e => {
              // console.log('ItemDom', {name, e});
              return e;
            }}
            currentVal={getFieldValue(name)}
            itemConfig={itemConfig}
          />,
        )
      ) : (
        <ItemDom onChange={onChange} currentVal={currentVal} itemConfig={itemConfig} />
      )}
      {itemConfig.itemExtra || ''}
    </Form.Item>
  );
}

class ItemDom extends React.Component {
  constructor(props) {
    super(props);
    this.getFieldDecorator = props.form.getFieldDecorator;
    this.useDecorator = this.getFieldDecorator && typeof this.getFieldDecorator === 'function';
  }

  onChange = (value, subPath) => {
    // console.log('onChange', {value, useDecorator: this.useDecorator});
    this.useDecorator
      ? this.props.onChange(value)
      : this.props.onChange(value, `${name}${subPath || ''}`);
  };
  onBlur = e => e;

  render() {
    const { currentVal: currentVal, itemConfig } = this.props;
    // console.log('ItemDom value', value);
    const { type = 'input', disabled = false, form_disabled = false, ...itemProps } = itemConfig;
    itemProps.disabled = disabled || form_disabled;
    // console.log('ItemDom type', type);
    let compoProps = {
      itemProps,
      currentVal: currentVal,
      onChange: this.onChange,
      onBlur: this.onBlur,
    };
    switch (type) {
      case 'input':
        return <Input {...compoProps} />;
      case 'textarea':
        return <TextArea {...compoProps} />;
      case 'select':
        return <Select {...compoProps} />;
      case 'radio':
        return <Radio {...compoProps} />;
      case 'date-picker':
        return <DatePicker {...compoProps} />;
      case 'range-picker':
        return <RangePicker {...compoProps} />;
      case 'cascader':
        return <Cascader {...compoProps} />;
      case 'region-number':
        return <RegionNumber {...compoProps} />;
      case 'single-img':
        return <SingleImgField {...compoProps} />;
      default:
        return <span>类型错误</span>;
    }
  }
}

export default FormItem;