import { Button, message } from 'antd'
import { RcFile } from 'antd/lib/upload'
import { AxiosResponse } from 'axios'
import { useCallback, useContext, useEffect, useState } from 'react'
import DragModal from '../drag-modal/DragModal'
import './upload-panel.less'
import UploadFilePanelItem from './upload-item'
import React from 'react'

interface IProps{
    //通过md5判断文件是否存在的api,如果存在则返回文件对象（文件对象可自己定义），不存在返回null
    checkFileExists: (md5: string, params?: {}) => Promise<AxiosResponse<any>>     
    //通过关键字key查询文件上传地址url（关键字可以为文件名等等）
    getUploadUrl: (key: string, params?: {}) => Promise<AxiosResponse<any>>
    uploadContext: React.Context<UploadFileState>   //上传文件上下文
}

interface IProps{
    //通过md5判断文件是否存在的api,如果存在则返回文件对象（文件对象可自己定义），不存在返回null
    checkFileExists: (md5: string, params?: {}) => Promise<AxiosResponse<any>>     
    //通过关键字key查询文件上传地址url（关键字可以为文件名等等）
    getUploadUrl: (key: string, params?: {}) => Promise<AxiosResponse<any>>
    uploadContext: React.Context<UploadFileState>   //上传文件上下文
}

export interface UploadFileLocale {
    file: RcFile,
    callbackFn: (param: FileUploadParam) => Promise<any> //具体上传的回调函数
}

//上传文件上下文的接口
export interface UploadFileState {
    files: UploadFileLocale[]
    visible: boolean
    startUpload: (files: UploadFileLocale[]) => void
    onEnd: (value: number) => void
    count: number // 用于记录上传了多少个文件
}

export interface FileUploadParam {
    md5: string,
    suffix: string,
    filePath: string,
    name: string,
    type?: number,
    replaceId?: number,
    fileSize: number,
}

export const useUploadService = () => {
    const [files, setFiles] = useState<UploadFileLocale[]>([]);
    const [visible, setVisible] = useState<boolean>(false);
    const [count, setCount] = useState<number>(0);
    const startUpload = useCallback((uploadFiles: UploadFileLocale[]) => {
        setCount(0);
        setFiles(uploadFiles)
    }, [])

    const onEnd = useCallback((value: number) => {
        setCount(value);
        setVisible(false)
    }, [])

    useEffect(() => {
        if (files.length > 0) {
            setVisible(true);
        }
    }, [files])

    return {
        files,
        visible,
        startUpload,
        onEnd,
        count,
    } as UploadFileState
}



export default function UploadPanel(props: IProps) {
    const uploadContext = useContext<UploadFileState>(props.uploadContext);
    const [files, setFiles] = useState<UploadFileLocale[]>([]);
    const [uploadCounter, setUploadCounter] = useState(0);
    const [stopSignal, setStopSignal] = useState(false);

    useEffect(() => {
        if (uploadContext.visible) {
            setStopSignal(false)
            start();
        }
    }, [uploadContext.visible])

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

    const start = () => {
        let files = uploadContext.files;
        if (files == null || files.length === 0) {
            message.warning('没有要上传的文件，上传被取消');
            onClose();
            return;
        }
        setFiles([...files]);
    }

    const onClose = (time = 500) => {
        setTimeout(() => {
            setFiles([]);
            uploadContext.onEnd(uploadCounter);
            setUploadCounter(0);
        }, time)
    }

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

    return (
        <DragModal
            visible={uploadContext.visible}
            mask
            showHeader={false}
            destroyOnClose={true}
            wrapClassName='tn-upload-panel-wrapper'
        >
            <div className="tn-upload-panel-container">
                <div className='scrollable'>
                    {files.map(item => (
                        <UploadFilePanelItem
                            checkFileExists={props.checkFileExists}
                            getUploadUrl={props.getUploadUrl}
                            onComplete={() => setUploadCounter(pre => pre + 1)}
                            key={item.file.uid}
                            file={item.file}
                            stopSignal={stopSignal}
                            callbackFn={item.callbackFn} />
                    ))}
                </div>

                <div className="footer">
                    <Button danger size="small" onClick={stop}>取消上传</Button>
                </div>
            </div>
        </DragModal>
    )
}

// 如果需要默认值取消下面注释
// UploadPanel.defaultProps = {
//     checkFileExists: checkFileExists,
//     getPresignedPutObjectUrl: getPresignedPutObjectUrl,
//     uploadContext: UploadFileContext
// }