import { Button, message } from "antd"
import { AxiosResponse } from "axios"
import React from "react"
import { useCallback, useContext, useEffect, useState } from "react"
import DragModal from "../drag-modal/DragModal"
import DownloadItem from "./download-item"
import './download-panel.less'

interface Iprops {
    //该api返回一个url
    getFileUrl?: (params?: {}) => Promise<AxiosResponse<any>>
    downloadContext: React.Context<DownloadState>
}

//下载组件上下文接口
export interface DownloadState {
    files: DownloadFile[]
    visible: boolean
    startDownload: (file: DownloadFile[], onCloseCallbackFn?: () => void) => void
    onEnd: () => void
}

export interface DownloadFile {
    //如果要调用api传递文件需要前四个变量不为空  如果直接通过url传递文件则需要后三项不为空
    objectName?: string
    bucketName?: string

    filename: string
    suffix: string
    
    url?: string
}

export const useDownloadService = () => {
    const [files, setFiles] = useState<DownloadFile[]>(null);
    const [visible, setVisible] = useState<boolean>(false);
    const [onCloseCallbackFn, setOnCloseCallbackFn] = useState<() => void>();
    const startDownload = useCallback((dfile: DownloadFile[], onCloseCallbackFn) => {
        setFiles([...dfile])
        setOnCloseCallbackFn(onCloseCallbackFn);
    }, [])

    const onEnd = useCallback(() => {
        setVisible(false)
        if (!!onCloseCallbackFn) {
            onCloseCallbackFn();
        }
    }, [])

    useEffect(() => {
        if (files != null) {
            setVisible(true);
        }
    }, [files])

    return {
        files,
        visible,
        startDownload,
        onEnd,
    } as DownloadState
}



export default function DownloadPanel(props: Iprops) {

    const downloadContext = useContext<DownloadState>(props.downloadContext);
    const [stopSignal, setStopSignal] = useState(false);
    const [uploadCounter, setUploadCounter] = useState(0);

    useEffect(() => {
        if (downloadContext.visible) {
            setStopSignal(false)
            let files = downloadContext.files;
            if (files == null || files.length === 0) {
                message.warning('没有要下载的文件，下载被取消');
                onClose();
                return;
            }
        }
    }, [downloadContext.visible])

    useEffect(() => {
        if (uploadCounter && uploadCounter === downloadContext.files?.length) {
            onClose(500);
        }
    }, [uploadCounter])

    const stop = () => {
        setStopSignal(true)
        onClose(0);
    }

    const onClose = (time = 1000) => {
        setTimeout(() => {
            downloadContext.onEnd();
            setUploadCounter(0);
            setStopSignal(false);
        }, time)
    }

    return (
        <DragModal
            visible={downloadContext.visible}
            mask
            showHeader={false}
            destroyOnClose={true}
            wrapClassName="tn-download-panel-wrapper"
        >
            <div className="tn-download-panel-container">
                {downloadContext.files?.map((item, idx) => (
                    <DownloadItem
                        downloadContext={props.downloadContext}
                        getFileUrl={props.getFileUrl}
                        file={item}
                        key={idx}
                        stopSignal={stopSignal}
                        onComplete={() => setUploadCounter(pre => pre + 1)} />
                ))}
                <div className="footer">
                    <Button danger size="small" onClick={stop}>取消下载</Button>
                </div>
            </div>

        </DragModal>
    )
}

//如果需要默认值可取消下面注释

DownloadPanel.defaultProps = {
//     downloadContext: DownloadContext,
//     getFileUrl: getFileUrl
}