import styles from './style.module.css'
import Image from 'next/image'
import AppContext from '@/components/hooks/createContext'
import { useContext } from 'react'
import { UploadFile } from '@/components/hooks/upload/UploadCtx'
import Toast from '@/components/Toast'
import CustomUpload from '@/components/CustomUpload/Index'
import { RcFile } from 'antd/es/upload'
import { useTranslation } from 'next-i18next'

interface IPorps {
    maxWidth?: number
    maxHeight?: number
    setUploading: (value: boolean) => void
    beforeUploading?: (file: RcFile) => void
    customVerfiyMessage?: string
}

const UploadedImage = ({
    maxWidth,
    maxHeight,
    setUploading,
    customVerfiyMessage,
    beforeUploading = () => {
        console.info('')
    },
}: IPorps) => {
    const { t } = useTranslation('studio')
    const {
        handleTaskResult,
        saveTaskDetail,
        taskId: [taskId],
        taskResult: [taskResult],
        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
    } = useContext(AppContext)!

    const beforeUpload = async (file) => {
        await saveTaskDetail()
        await beforeUploading(file)
    }

    const uploadSuccess = async (file: UploadFile) => {
        if (file.image && file.showImage) {
            setUploading(true)
            handleTaskResult('image', file.image, true)
            handleTaskResult('showImage', file.showImage, true)
            setTimeout(() => {
                setUploading(false)
            }, 500)
        } else {
            Toast({
                message: t('toast.picUploadFail'),
                duration: 3000,
            })
        }
    }

    return (
        <div className={styles.uploadWrap}>
            <CustomUpload
                type="main"
                taskId={taskId ?? ''}
                taskName={taskResult.name ?? ''}
                maxWidth={maxWidth}
                maxHeight={maxHeight}
                beforeUpload={beforeUpload}
                uploadSuccess={uploadSuccess}
                setUploading={setUploading}
                needDragger={true}
            >
                <div className={styles.uploadMessage}>
                    <Image
                        src="/gallery_export.svg"
                        alt="upload_icon"
                        width={24}
                        height={24}
                    ></Image>
                    <p className={styles.uploadText}>{t('editMask.clickUpload')}</p>
                    <p className={`${styles.dragText} ag14`}>{t('editMask.dragUpload')}</p>
                    <p className={`${styles.size} ag12`}>{t('editMask.uploadLimitation')}</p>
                    {customVerfiyMessage ? (
                        <p className={`${styles.size} ag12`}>{customVerfiyMessage}</p>
                    ) : null}
                </div>
            </CustomUpload>
        </div>
    )
}

export default UploadedImage
