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 { updateConstant } from 'models/constant';
import styles from '../SortModal.less';
import {getAssetsUrl} from 'utils/utils';

const { Option } = Select;
const categorys = ['定制组件', '常规图表', '文字', '辅助图形', '指标', '地图', '交互', '第三方', '其他'];
const types = ['柱形图', '折线图', '饼图', '散点图', '其他'];

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

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

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

  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.updateConstant({ ...values, moduleName, thumb });
      this.setState({
        uploading: false
      });

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

  handleSelectChange = (category) => {
    this.setState({
      category
    });
  };

  render() {
    const { visible, uploading } = this.state;
    const { data } = this.props;
    const category = (this.formRef.current && this.formRef.current.getFieldValue('category')) || data.category;
    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}
          theme="black"
          confirmLoading={uploading}
          destroyOnClose>
          <Form ref={this.formRef} labelCol={{ span: 4 }} wrapperCol={{ span: 19 }} initialValues={data} autoComplete="off">
            <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%' }} onChange={this.handleSelectChange} dropdownClassName={styles.selectDrop}>
                {categorys.map((d, i) => (
                  <Option key={i} value={d}>
                    {d}
                  </Option>
                ))}
              </Select>
            </Form.Item>
            {category == categorys[1] && (
              <Form.Item label="子类目" name="type" rules={[{ required: true, message: '请选择子类别' }]}>
                <Select style={{ width: '100%' }} dropdownClassName={styles.selectDrop}>
                  {types.map((d, i) => (
                    <Option key={i} value={d}>
                      {d}
                    </Option>
                  ))}
                </Select>
              </Form.Item>
            )}
            <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 = {
  updateConstant
};

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