import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Form, Input, Select } from '@easyv/antd';
import { FormInstance } from '@easyv/antd/lib/form';
import ConfirmModal from '../../../../components/ConfirmModal';
import UploadThumb from '../UploadThumb';
import defaultThumb from '../../../../../images/default.png';
import {getAssetsUrl} from 'utils/utils';
import { updateMobileConstant } from 'models/mobile-constant';
import styles from '../SortModal.less';

const { Option } = Select;
const categorys = ['常规组件', '交互组件'];

interface IProps {
  data: {
    moduleName: string;
    thumb: string;
    category: string;
    version: string;
  };
  updateMobileConstant: (param) => Promise<{}>;
  children: React.ReactElement;
}

interface IState {
  uploading: boolean;
  visible: boolean;
  thumb: string | null;
}

class UpdateConstantModal extends Component<IProps, IState> {
  formRef = React.createRef<FormInstance>();
  constructor(props) {
    super(props);
    this.state = {
      uploading: false,
      visible: false,
      thumb: null
    };
  }

  showModal = () => {
    this.setState({
      visible: true
    });
  };

  hideModal = () => {
    this.setState({
      visible: false
    });
  };

  setThumbValue = (file) => {
    this.setState({
      thumb: file
    });
    this.formRef?.current?.setFieldsValue({ thumb: file });
  };

  handleSubmit = (e) => {
    const { thumb } = this.state;
    e.preventDefault();
    this.formRef?.current?.validateFields().then(async (values) => {
      this.setState({
        uploading: true
      });
      const { moduleName } = this.props.data;

      const result = await this.props.updateMobileConstant({ ...values, moduleName, thumb });
      this.setState({
        uploading: false
      });

      if (result) {
        this.setState({
          visible: false
        });
      }
    });
  };

  render() {
    const { visible, uploading } = this.state;
    const { data } = this.props;
    const thumb = data.thumb ? getAssetsUrl(`${data.thumb}`) : defaultThumb;

    return (
      <span>
        <span onClick={this.showModal}>{this.props.children}</span>
        <ConfirmModal
          title="编辑组件"
          visible={visible}
          onCancel={this.hideModal}
          onOk={this.handleSubmit}
          footer={true}
          confirmLoading={uploading}
          destroyOnClose>
          <Form labelCol={{ span: 4 }} wrapperCol={{ span: 19 }} initialValues={data} ref={this.formRef}>
            <Form.Item
              label="组件名称"
              name="name"
              rules={[
                { required: true, message: '组件名称必填' },
                { min: 2, message: '不得少于2位字符' },
                { max: 16, message: '不得多于16位字符' }
              ]}>
              <Input placeholder="请输入组件名称，2～16个字符" />
            </Form.Item>
            <Form.Item label="组件分类" name="category" rules={[{ required: true, message: '请选择组件类别' }]}>
              <Select style={{ width: '100%' }} dropdownClassName={styles.selectDrop}>
                {categorys.map((d, i) => (
                  <Option key={i} value={d}>
                    {d}
                  </Option>
                ))}
              </Select>
            </Form.Item>
            {/* <Row className="ant-form-item" style={{ marginBottom: 16 }}>
              <Col span={4} style={{ textAlign: 'right' }}>
                组件版本：
              </Col>
              <Col span={14}>v{data.version}</Col>
            </Row> */}
            <Form.Item wrapperCol={{ span: 20 }} label="组件版本" name="thumb">
              <div style={{ display: 'flex', alignItems: 'center', color: '#b4b7c1' }}>
                <span>v{data.version}</span>
              </div>
            </Form.Item>
            <Form.Item wrapperCol={{ span: 20 }} label="缩略图" name="thumb">
              <div style={{ display: 'flex', alignItems: 'center' }}>
                <UploadThumb imgUrl={thumb} handleImgChange={this.setThumbValue} />
                <span style={{ marginLeft: 12, color: '#999' }}>单击图片重新上传，200KB以内100*60px图片</span>
              </div>
            </Form.Item>
          </Form>
        </ConfirmModal>
      </span>
    );
  }
}

const mapDispatchToProps = {
  updateMobileConstant
};

export default connect(null, mapDispatchToProps)(UpdateConstantModal);
