import React, { Fragment, useState, useEffect } from 'react';
import { Form, Input, Select } from '@easyv/antd';
import UploadThumb from 'components/UploadThumb';
import { useMousetrapPause } from 'components/easyUse';
import ConfirmModal from 'components/ConfirmModal';
import { objectValueTrim ,getAssetsUrl} from 'utils/utils';
import styles from '../SortModal.less';

export default function EditModal({
  children,
  data,
  categorys,
  onOk
}: {
  children: React.ReactNode;
  data?: any;
  categorys: any;
  onOk: (value: any) => any;
}) {
  const [visible, setVisible] = useState(false);
  const [thumb, setThumb] = useState();
  const [preview, setPreview] = useState();
  const [form] = Form.useForm();
  const { validateFields } = form;
  const [uploading, setUploading] = useState(false);

  const handleSubmit = () => {
    validateFields().then(async (values) => {
      setUploading(true);
      const param: any = {
        ...values
      };
      if (preview) {
        param.preview = preview;
      }
      if (thumb) {
        param.thumb = thumb;
      }
      if (data?.id) {
        param.id = data.id;
      }
      const result = await onOk(objectValueTrim(param));
      setUploading(false);
      if (result) {
        setVisible(false);
      }
    });
  };

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

  useMousetrapPause(visible);

  const defaultData = data || {
    platformCategoryId: categorys[0]?.children[0]?.id
  };

  return (
    <Fragment>
      <span onClick={() => setVisible(true)}>{children}</span>
      <ConfirmModal
        title="新建"
        visible={visible}
        onCancel={() => setVisible(false)}
        onOk={handleSubmit}
        confirmLoading={uploading}
        footer={true}
        theme="black"
        destroyOnClose={true}>
        <Form labelCol={{ span: 5 }} wrapperCol={{ span: 19 }} initialValues={defaultData} form={form} autoComplete="off">
          <Form.Item
            label="资源名称"
            name="name"
            rules={[
              { required: true, message: '组件名称必填', whitespace: true },
              { min: 2, max: 16, message: '请输入2～16个字符' }
            ]}>
            <Input placeholder="请输入名称，2～16个字符" />
          </Form.Item>
          <Form.Item label="选择分组" name="platformCategoryId" rules={[{ required: true, message: '选择分组' }]}>
            <Select dropdownClassName={styles.selectDrop}>
              {categorys.map((d) => {
                return (
                  <Select.OptGroup key={d.id} label={d.name}>
                    {d.children?.map((v) => {
                      return (
                        <Select.Option key={v.id} value={v.id}>
                          {v.name}
                        </Select.Option>
                      );
                    })}
                  </Select.OptGroup>
                );
              })}
            </Select>
          </Form.Item>

          <Form.Item label="缩略图" name="thumb">
            <UploadThumb
              url={data?.thumb ? getAssetsUrl(`${data.thumb}`) : null}
              maxSize={200 * 1024}
              onChange={setThumb}
            />
          </Form.Item>

          <Form.Item label="预览图" name="preview">
            <UploadThumb
              url={data?.preview ? getAssetsUrl(`${data.preview}`) : null}
              maxSize={2 * 1024 * 1024}
              onChange={setPreview}
            />
          </Form.Item>
        </Form>
      </ConfirmModal>
    </Fragment>
  );
}
