/**
 * THIS IS AN AUTO-GENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
 */
import { useState, useEffect, useCallback } from 'react';
import { Upload, Button, message } from 'antd';
import gadmin from '@/gadmin';
import { UploadOutlined } from '@ant-design/icons';
import { getFileName, parseFileSize } from '@/generated/utils';

export type FileUploadProps = {
  value?: string;
  fieldProps?: Record<string, any>;
  onChange?: (_value: any) => void;
  path?: string;
};

const FileUpload = (props: FileUploadProps) => {
  const [fileList, setFileList] = useState<any[]>([]);

  const { onChange } = props;
  const handleChange = useCallback(
    (event: any) => {
      // 刚上传完成，提取url字段用于支持预览
      setFileList(
        event.fileList.map((item: any) => {
          if (!item.url && item.response) {
            Object.assign(item, { url: item.response.data?.url });
          }
          return item;
        }),
      );

      // 只在上传完成或删除完成时触发更新以免重复请求
      if (['done', 'removed'].includes(event.file.status)) {
        const fileUrlList = event.fileList
          .filter((e: any) => {
            return (
              (e.status === 'done' && !e.response) ||
              (e.response && e.response.code === 0 && e.response.data)
            );
          })
          .map((e: any) => {
            if (e.response) {
              return e.response.data.url;
            }
            return e.url;
          });
        onChange?.(fileUrlList.join('|'));
      }
    },
    [onChange],
  );

  const beforeUpload = useCallback(
    (file) => {
      // size limit
      if (props.fieldProps?.maxSize) {
        const { humanFormat, bytes } = parseFileSize(props.fieldProps.maxSize);
        if (file.size > bytes) {
          message.error(`file size limits to ${humanFormat}`);
          return Upload.LIST_IGNORE;
        }
      }

      return true;
    },
    [props.fieldProps?.maxSize],
  );

  // 拆分文件列表
  useEffect(() => {
    if (props.value) {
      const initialFileList = props.value.split('|').map((e, i) => {
        return {
          uid: i,
          name: getFileName(e),
          status: 'done',
          url: e,
        };
      });
      setFileList(initialFileList);
    }
    // FIXME: onChange会更新props.value，所以依赖props.value会出现列表闪烁，故取消依赖
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <Upload
      {...props.fieldProps}
      action={gadmin.uploadUrl()}
      headers={gadmin.uploadHeaders?.()}
      data={{ path: props.path || 'gadmin/files' }}
      fileList={fileList}
      onChange={handleChange}
      beforeUpload={beforeUpload}
    >
      <Button
        disabled={props.fieldProps?.maxCount && fileList.length >= props.fieldProps.maxCount}
        icon={<UploadOutlined />}
      >
        Upload
      </Button>
    </Upload>
  );
};

export default FileUpload;