import React, { useState, useEffect } from 'react';
import { Modal, Form, Input, Radio } from 'antd';

import { dispatchLatest } from '../../../../model'; 

class UpdateTreeItemForm extends React.Component {

  constructor(props){
    super(props);
    this.state = {
      radioDisable: false
    }
  }

  componentDidMount() {
    this.radioState();
  }

  componentDidUpdate(preProps, preState) {
    const { item } = this.props;
    if (item!==preProps.item) {
      this.radioState();
    }
  }

  radioState = () => {
    const { item } = this.props;
    this.setState({ radioDisable: item? false: true })
  }

  render() {
    const { type, form } = this.props;
    const { radioDisable } = this.state;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 },
      },
    };

    return (
      <Form 
        {...formItemLayout}
        form={form}
      >
        {
          type==='add'&&<Form.Item label="目录类型" name="action">
            <Radio.Group disabled={radioDisable} >
              <Radio value='root'>根目录</Radio>
              <Radio value='sub'>子目录</Radio>
            </Radio.Group>
          </Form.Item>
        }
        <Form.Item 
          label="名称" 
          name="name"
          rules={[{ required: true, message: '请输入名称!' }]}
          >
          <Input />
        </Form.Item>
        <Form.Item 
          label="描述" 
          name="remark"
          rules={[{ required: true, message: '请输入描述!' }]}
          >
          <Input />
        </Form.Item>
        <Form.Item 
          label="编码" 
          name="code"
          >
          <Input />
        </Form.Item>
      </Form>
    );
  }
}

const UpdateTreeItemModal = (props) => {

  const { onOk, type, item, onCancel, visible, rootId } = props;
  const [ confirmLoading, setConfirmLoading ] = useState(false);
  const [form] = Form.useForm();

  useEffect(() => {
    if (visible) {

      let _action = '';
      if (type === 'add') {
        _action = item ? 'sub' : 'root';
      }

      form.setFields([{ name: 'name', errors: [] }, { name: 'remark', errors: [] }, { name: 'code', errors: [] }]);

      if (type === 'add') {
        form.setFieldsValue({ action: _action, name: '', remark: '', code: '' });
      } else {
        form.setFieldsValue({ action: '', name: item?item.name:'', remark: item?item.remark:'', code: item?.code });
      }
    }
    //eslint-disable-next-line react-hooks/exhaustive-deps
  }, [visible])

  const handleOk = async () => {

    setConfirmLoading(true);

    try {
      const values = await form.validateFields();

      let payload = null;
      if (type === 'add' && values.action==='root') {
        payload = {
          name: values.name||'',
          remark: values.remark||'',
          code: values.code||'',
          parentId: rootId
        };
      } else if (type === 'add') {
        payload = {
          name: values.name||'',
          remark: values.remark||'', 
          code: values.code||'',
          parentId: item.id
        };
      } else {
        payload = {
          ...item,
          name: values.name||'',
          remark: values.remark||'', 
          code: values.code||'',
        }
      }

      dispatchLatest({
        type: 'pds.saveCatalog',
        payload: {
          data: payload
        },
        callback: id => {

          setConfirmLoading(false);

          if (onOk) {
            onOk(id, payload);
          }
        },
        error: () => {
          setConfirmLoading(false);
        }
      });
    } catch (errInfo) {
      setConfirmLoading(false);
    }
  }

  return (
    <Modal 
      forceRender
      confirmLoading={confirmLoading}
      visible={visible}
      title={type==='add'?"新增目录":"更新目录"}
      onOk={handleOk}
      onCancel={() => {
        setConfirmLoading(false);
        onCancel && onCancel();
      }}
    >
      <UpdateTreeItemForm form={form} item={item} type={type} />
    </Modal>
  );
}

export default UpdateTreeItemModal;