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

interface Iporps {
    setUploading: (value: boolean) => void
}

const UploadMask = ({ setUploading }: Iporps) => {
    const { t } = useTranslation('studio') 
    const {
        agentName: [agentName],
        taskId: [taskId],
        taskResult: [taskResult],
        handleTaskResult,
        saveTaskDetail,
        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
    } = useContext(AppContext)!

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

    const beforeUpload = async () => {
        // 编辑选区打点
        const logParam = window?.logger.getParams('10000005', window?.logger.EVENT_TYPE.CLICK, {
            taskId,
            agentName,
            type: 2,
        })
        window?.logger.log([logParam])
        // 先保存下配置
        await saveTaskDetail()
    }

    return (
        <CustomUpload
            type="mask"
            taskId={taskId ?? ''}
            taskName={taskResult.name ?? ''}
            beforeUpload={beforeUpload}
            uploadSuccess={uploadSuccess}
            setUploading={setUploading}
            needDragger={false}
        >
            <div className={styles.uploadMask}>{t('editMask.uploadMaskPic')}</div>
        </CustomUpload>
    )
}

export default UploadMask
