import React, { FC, memo, useEffect } from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Select, Input, Modal, Button, InputNumber } from 'antd';
import { baseFormOptionsType } from '../types';
import Color from '../Color';

const { Option } = Select;

const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 },
};

interface EditorModalProps {
  item: any;
  onSave: (data: any) => void;
  visible: boolean;
  form: any
}

const EditorModal: FC<EditorModalProps> = props => {
  const { item, onSave, visible, form } = props;
  const {
    getFieldDecorator,
    validateFieldsAndScroll,
    setFieldsValue,
    getFieldsValue,
  } = form


  const onFinish = (values: any) => {
    onSave && onSave(values);
  };

  const handleOk = () => {
    form
      .validateFields()
      .then(values => {
        onSave && onSave({
          ...item,
          ...values
        }, true);
      })
      .catch(err => {
        // console.log(err);
      });
  };


  useEffect(() => {
    if (form && item && visible) {
      form.resetFields(item);
    }
  }, [form, item, visible]);

  // console.log(item, '@@@')
  return (
    <>
      <Modal
        title="编辑表单组件"
        footer={
          <div>
            <Button type="primary" onClick={() => handleOk()}>
              确定
            </Button>
          </div>
        }
        forceRender
        visible={visible}
        onOk={handleOk}
        closable={false}
      >
        {!!item && <Form
          form={form}
          name={`formItem_editor_modal`}
          {...formItemLayout}
        >
          <Form.Item label='字段名' key={item?.label}>
            {getFieldDecorator('label', {
              initialValue: item?.label,
              rules: [{ required: true, message: '请输入字段名!' }]
            })(
              <Input disabled={item?.labelEdit} />
            )}
          </Form.Item>
          <Form.Item label='提示文本'>
            {getFieldDecorator('placeholder', {
              initialValue: item?.placeholder
            })(
              <Input />
            )}
          </Form.Item>
        </Form>
        }
      </Modal>
    </>
  );
};

export default memo(Form.create({
  onValuesChange: (props, changedValues, allValues) => {
    props?.onSave({
      ...props?.item,
      ...allValues
    });
  }
})(EditorModal));