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

export default function EditModal({
  children,
  data,
  categorys,
  onOk,
  title
}: {
  children: React.ReactNode;
  data?: any;
  categorys: any;
  onOk: (value: any) => any;
  title?: string;
}) {
  const [visible, setVisible] = useState(false);
  const [content, setContent] = useState();
  const [thumb, setThumb] = 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 (content) {
        param.content = content;
      }
      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 || {
    type: 3,
    platformCategoryId: categorys[0]?.children[0]?.id
  };

  return (
    <Fragment>
      <span onClick={() => setVisible(true)}>{children}</span>
      <ConfirmModal
        title={title}
        visible={visible}
        onCancel={() => setVisible(false)}
        onOk={handleSubmit}
        confirmLoading={uploading}
        footer={true}
        theme="black"
        destroyOnClose>
        <Form
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 19 }}
          initialValues={defaultData}
          form={form}
          className={styles.formWrapper}
          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.selectStyle}>
              {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="content"
            rules={[
              {
                required: true,
                message: '文件不能为空'
              }
            ]}>
            <UploadModel
              url={data?.content ? getAssetsUrl(`${data.content}`) : null}
              maxSize={150 * 1024 * 1024}
              onChange={setContent}
            />
          </Form.Item>

          <Form.Item
            label="封面缩略图"
            name="thumb"
            rules={[
              {
                required: true,
                message: '封面不能为空'
              }
            ]}>
            <UploadThumb
              url={data?.thumb ? getAssetsUrl(`${data.thumb}`) : null}
              maxSize={2 * 1024 * 1024}
              onChange={setThumb}
            />
          </Form.Item>
        </Form>
      </ConfirmModal>
    </Fragment>
  );
}
