import React, { useState } from 'react';
import { Upload as AntdUpload } from '@formily/antd';
import { UploadProps as AntdUploadProps, Modal } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { UploadChangeParam, UploadFile, UploadListType } from 'antd/lib/upload/interface';
import { baseRequestForm as request } from '@/utils/request';
import classNames from 'classnames';
import { UploadBizType } from '@/constants/enum/uploadBizType';
import { FileType } from '@/constants/enum/fileType';
import { getFileType } from '@/utils/getFileType';
import { CACHE_TOKEN } from '@/constants/cacheKey';
import styles from './index.less';

const UPLOAD_URL = '/admin/common/upload';

interface UploadPropsType extends AntdUploadProps {
  value?: UploadFile<any>[];
  bizType: UploadBizType;
}
const Upload: React.FC<UploadPropsType> = ({
  listType = 'picture-card',
  accept = 'image/*',
  value = [],
  maxCount = 1,
  bizType,
  onChange,
  ...rest
}) => {
  // 图片预览
  const [previewVisible, setPreviewVisible] = useState<boolean>(false);
  const [previewImage, setPreviewImage] = useState<string | undefined>('');
  const [previewTitle, setPreviewTitle] = useState<string>('预览');
  const handlePreview = async (file: UploadFile) => {
    // // 文件上传失败时，没有url
    // if (
    //   (file.url && !imageExpendRegExp.test(file.url)) ||
    //   (!file.url && !imageExpendRegExp.test(file.name))
    // )
    //   return;
    // !file.url &&
    //   !file.preview &&
    //   (file.preview = await getBase64(file.originFileObj));
    const { ...rest1 } = file;
    setPreviewImage(file.url || file.preview);
    setPreviewVisible(true);
    setPreviewTitle(file.name || '预览');
  };
  // onChange
  const handleChange = (fileList) => {
    fileList = fileList.slice(-maxCount);
    fileList.forEach((item) => {
      if (item.response && item.response.data) {
        const resData = item.response.data;
        resData.url && (item.url = resData.url);
        resData.path && (item.path = resData.path);
      }
    });
    onChange && onChange(fileList);
  };
  const props = {
    listType,
    accept,
    onPreview: handlePreview,
    maxCount,
    onChange: handleChange,
    // customRequest: handleCustomRequest,
    fileList: value,
    action: `${UPLOAD_URL}?type=${bizType}`,
    headers: { token: localStorage.getItem(CACHE_TOKEN) },
    ...rest,
  };
  const className = {
    [props.className!]: true,
    [styles.upload]: true,
    [styles.hideButton]: value.length >= maxCount,
  };
  return (
    <div>
      <AntdUpload {...{ ...props, className: classNames(className) }} />

      <Modal
        visible={previewVisible}
        title={previewTitle}
        footer={null}
        width={600}
        onCancel={() => setPreviewVisible(false)}
      >
        {getFileType(previewImage) === FileType.VIDEO ? (
          <video controls style={{ width: '100%' }} src={previewImage} />
        ) : (
          <img alt="预览" style={{ width: '100%' }} src={previewImage} />
        )}
      </Modal>
    </div>
  );
};

export default Upload;
