/**
 * Created by baoyinghai on 5/31/17.
 */
import React from 'react';
import { Form, Input, Col, Row } from '../../../../components/mxa';
const FormItem = Form.Item;
const TITLE_ALIAS = 'TITLE_ALIAS_SINGLE';

class SettingForm extends React.Component {

  static defaultProps = {
    getKeys: keys => keys,
    setFormItems: (key, oldValue) => {
      return {
        key,
        label: key,
        comp: <Input />,
        initData: oldValue[key] || key
      };
    }
  };

  constructor(props) {
    super(props);
  };

  renderItem = (keys, configFunc, oldValue, fields) => {
    const formItemLayout = {
      labelCol: 22,
      wrapperCol: 22
    };
    const { getFieldDecorator } = this.props.form;
    return keys.map(key => {
      return configFunc(key, oldValue, fields);
    }).map(({label, key, initData, comp}) => {
      return (
        <Col span={22}>
          <FormItem
            key={key}
            {...formItemLayout}
            label={label}
          >
            {
              getFieldDecorator(key, {
                rules: [{ required: true, message: '请输入列' + label + '的描述' }],
                initialValue: initData
              })(comp)
            }
          </FormItem>
        </Col>
      );
    });
  };

  triggerAction = () => {
    const { index, onClick, updateSetting, form } = this.props;
    form.validateFieldsAndScroll({ force: true }, (err, value) => {
      if (!err) {
        updateSetting && updateSetting(index, Object.keys(value).reduce((ret, item) => {
          if (item !== TITLE_ALIAS) {
            ret[item] = value[item];
          }
          return ret;
        }, {}), value[TITLE_ALIAS]);
        onClick && onClick();
      }
    });
  };

  renderButtons = () => {
    return [(
      <a key="cancel" onClick={this.props.onClick} className="cancel-btn">取消</a>
    ),
      (
        <div key="submit" onClick={this.triggerAction} className={'common-btn'} >
          <a>确定</a>
        </div>
      )];
  };

  componentDidMount() {
    const { createBottomButtons } = this.props;
    createBottomButtons && createBottomButtons(this.renderButtons());
  }

  render() {
    const { dataSource } = this.props;
    const demo = dataSource[0];
    if (!demo) return null;
    const fields = Object.keys(demo);
    return (
      <Form horizontal={true} >
        <div className="form-box" >
          <Row className="cell" type="flex" justify="start">
            <div style={{width: '100%'}}>
              <section className="detail-sec">
                <span className="anchorTag">通用设置</span>
              </section>
              {this.renderItem([TITLE_ALIAS], (key, oldValue) => {
                return {
                  key,
                  label: '标题',
                  comp: <Input />,
                  initData: oldValue[key]
                }
              }, {[TITLE_ALIAS]: this.props.title})}
            </div>
            {(() => {
              const fieldItems = this.props.getKeys(fields);
              if (fieldItems.length > 0) {
                return (
                  <div style={{width: '100%'}}>
                    <section className="detail-sec">
                      <span className="anchorTag">其他设置</span>
                    </section>
                    {this.renderItem(fieldItems, this.props.setFormItems, this.props.chartSetting, fields)}
                  </div>
                );
              }
              return null;
            })()}
          </Row>
        </div>
      </Form>
    );
  }
}

export default Form.create()(SettingForm);