import { Upload, UploadProps } from 'antd'
import styles from './style.module.css'
import {
    UploadFile,
    UploadType,
    useUpload,
    useUploadFiles,
} from '@/components/hooks/upload/UploadCtx'
import { ReactNode, useEffect, useMemo } from 'react'
import { verifyLoadImage } from '@/components/Nav/components/Edit/components/UploadImage/utils'
import { RcFile } from 'antd/es/upload'
import { useTranslation } from 'next-i18next'

interface Iporps {
    children: ReactNode
    type: UploadType
    uniqueKey?: string
    taskId: string
    taskName: string
    maxWidth?: number
    maxHeight?: number
    beforeUpload: (file: RcFile) => void
    uploadSuccess: (file: UploadFile) => void
    setUploading: (value: boolean) => void
    customVerifyLoadImage?: (file: RcFile) => void
    needDragger?: boolean
}

const { Dragger } = Upload

const CustomUpload = ({
    children,
    type,
    uniqueKey = '',
    taskId,
    taskName,
    beforeUpload,
    uploadSuccess,
    setUploading,
    maxWidth,
    maxHeight,
    needDragger = true,
}: Iporps) => {
    const { t } = useTranslation('studio')
    const uploadFiles = useUploadFiles()
    const { upload, remove } = useUpload()

    const file = useMemo(() => {
        return uploadFiles.find(
            (item) => item.taskId == taskId && item.type === type && item.uniqueKey == uniqueKey,
        )
    }, [uploadFiles, taskId, type, uniqueKey])

    useEffect(() => {
        if (file?.status == 'pending') {
            setUploading(true)
        } else {
            setUploading(false)
        }
        if (file?.status == 'success' || file?.status == 'failed') {
            const logParam = window?.logger.getParams('100000011', 3, {
                taskId,
                type: file.type,
                size: file.total,
                costTime: Date.now() - file.startTime,
                isSuccess: file.status == 'success',
            })
            window?.logger.log([logParam])
        }
        if (file?.status == 'success') {
            uploadSuccess(file)
            remove(type, taskId, uniqueKey)
        }
    }, [file])

    const props: UploadProps = {
        name: 'image',
        showUploadList: false,
        className: styles.wrap,
        accept: 'image/*',
        async beforeUpload(file) {
            const status = await verifyLoadImage(file, t, maxWidth, maxHeight)
            if (status && taskId) {
                await beforeUpload(file)
                upload(type, file as RcFile, taskId, taskName, uniqueKey)
            }
            return false
        },
        onDrop(e) {
            console.log('Dropped files', e.dataTransfer.files)
        },
    }

    return (
        <>
            {needDragger ? (
                <div className={styles.wrap}>
                    <Dragger {...props}>{children}</Dragger>
                </div>
            ) : (
                <Upload {...props}>{children}</Upload>
            )}
        </>
    )
}

export default CustomUpload
