import { Button, Upload } from "antd";
import { ArrowUpOutlined } from "@ant-design/icons";
import { useContext, useEffect, useState } from "react";
import { FileUploadParam, UploadFileLocale, UploadFileState } from "./upload-panel";
import React from 'react'

interface IProps {
    //上下文服务
    uploadFileContext: React.Context<UploadFileState>
    //上传之后的回调函数
    uploadCallbackFn: (uploadFile: FileUploadParam) => Promise<any>
    //按钮名称
    title: string
}

export default function UploadButton(props: IProps){


    //引入上下文
    const uploadFileContext = useContext(props.uploadFileContext);
    //上传文件后将文件储存至此
    let [uploadFileList, setUploadFileList] = useState([]);

    //当上传文件列表发生改变时，调用上传文件api开始上传
    useEffect(() => {
        if (uploadFileList.length === 0) return;
        let files: UploadFileLocale[] = uploadFileList.map(item => {
            return {
                file: item,
                callbackFn: props.uploadCallbackFn
            }
        })
        uploadFileContext.startUpload(files)
    }, [uploadFileList])

    //在执行antd本身组件Upload的上传文件功能之前所做的事
    //这里需要禁止antd本身组件Upload的上传行为，因此必须返回false
    const beforeUpload = (file, fileList) => {
        if (uploadFileList.length === 0) {
            setUploadFileList([...fileList]);
        }else{
            if(file){
                setUploadFileList([file])
            }
        }
        //必须返回false，以阻止antd组件自身上传行为
        return false;
    }

    
    return (
        <Upload
        name="file"
        beforeUpload={beforeUpload}
        showUploadList={false}                
        >
            <Button icon={<ArrowUpOutlined />} title={props.title} size="small" type="dashed"></Button>
        </Upload>
    )

}


UploadButton.defaultProps = {
    title: "上传"
}