import React, { useState, useEffect, useMemo } from 'react';
import { Form, Radio, Input, Select, Modal } from '@easyv/antd';
import Dragger from './Dragger';
import { UPLOAD_FIELDS as F, STATIC } from '../../constant';
import { addItem } from '../../api';
import './index.less';

const { Item, useForm } = Form;

export default function UploadModal({ prefixCls, visible, groupId, onOK, onCancel, menulist = [], categoryType }) {
  const [form] = useForm();
  const [type, setType] = useState(1);
  const [size, setSize] = useState(0);

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

  const onSize = (size) => {
    setSize(size);
  };

  const handleSubmit = () =>
    form.validateFields().then((values) => {
      if (categoryType === 3) {
        values.type = 3;
        values.size = size;
      }
      addItem(STATIC[groupId.slice(-1)], values)?.then(() => {
        onOK?.();
      });
    });

  const changeType = ({ target }) => {
    setType(target.value);
    form.setFieldsValue({ [F.FILE]: undefined });
  };

  const options: any = useMemo(
    () => [...menulist.slice(0, -1).map(({ id, name }) => ({ label: name, value: id })), { label: '未分组', value: null }],
    [menulist]
  );
  const [group_id] = groupId;
  const groupInitialValue = options.find((d) => d.value === group_id) ? group_id : null;

  return (
    <Modal
      title="自定义上传素材"
      visible={visible}
      onOk={handleSubmit}
      onCancel={onCancel}
      className={`${prefixCls} source-easyv-modal`}
      okText="确认">
      <Form form={form}>
        {categoryType === 1 && (
          <Item name={F.TYPE} className={`${prefixCls}-radio`} label="素材类型" initialValue={1}>
            <Radio.Group onChange={changeType}>
              <Radio value={1}>图片</Radio>
              <Radio value={2}>视频</Radio>
            </Radio.Group>
          </Item>
        )}
        <Item
          name={F.FILE}
          label="上传文件"
          rules={[
            {
              required: true,
              message: '文件不能为空'
            }
          ]}>
          <Dragger id="file" prefixCls={prefixCls} type={categoryType === 3 ? 3 : type} uploadType="file" onSize={onSize} />
        </Item>
        {categoryType === 3 && (
          <Item
            name={F.THUMB}
            label="封面图"
            rules={[
              {
                required: true,
                message: '封面不能为空'
              }
            ]}>
            <Dragger id="preview" prefixCls={prefixCls} type={1} uploadType="preview" />
          </Item>
        )}
        <Item
          name={F.NAME}
          label="资源名称"
          rules={[
            {
              required: true,
              message: '资源名称不能为空'
            }
          ]}>
          <Input placeholder="请输入标题" type="text" autoComplete="off" maxLength={20} />
        </Item>
        <Item initialValue={groupInitialValue} name={F.GROUP} label="选择分组">
          <Select
            className={`${prefixCls}-select`}
            dropdownClassName={`${prefixCls}-select-dropdown`}
            options={options}
            placeholder="请选择分组"
          />
        </Item>
      </Form>
    </Modal>
  );
}

UploadModal.defaultProps = {
  prefixCls: 'source-upload-modal'
};
