import styles from './style.module.css'
import Image from 'next/image'
import { useState, useRef, useEffect, useContext } from 'react'
import { IgetTaskRes } from '@/pages/api/base/type'
import { deleteTask, suspendTask } from '@/pages/api/base'
import AppContext from '@/components/hooks/createContext'
import { useTranslation } from 'next-i18next'
import Toast from '@/components/Toast'
import { Tooltip } from 'antd'

interface Iprops {
    item: IgetTaskRes
    getTaskList: () => void
}
const TaskStatus = ({ item, getTaskList }: Iprops) => {
    const { t } = useTranslation('studio')
    const [current, setCurrent] = useState('')
    const ref = useRef<HTMLDivElement>(null)
    const {
        taskId: [taskId, setTaskId],
        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
    } = useContext(AppContext)!

    useEffect(() => {
        const handleClickOutside = (event: MouseEvent) => {
            const target = event.target as HTMLElement
            if (ref.current && !ref.current.contains(target)) {
                setCurrent('')
            }
        }
        document.addEventListener('mousedown', handleClickOutside)
        return () => {
            document.removeEventListener('mousedown', handleClickOutside)
        }
    }, [ref])

    const quit = async () => {
        if (!taskId || !item?.canSuspend) return
        const value = await suspendTask({ taskId })
        if (value) {
            Toast({
                message: t('toast.suspendSuccess'),
                type: 'success',
            })
        }
    }

    return (
        <>
            {item.status === 'Pending' ||
            item.status === 'Running' ||
            item.status === 'Segmenting' ? (
                <Tooltip
                    placement="right"
                    title={item?.canSuspend ? t('suspendTask') : ''}
                    color={'#333030'}
                >
                    <div
                        className={`${styles.loadingWrap} ${
                            item?.canSuspend ? styles.suspend : ''
                        }`}
                        onClick={(e) => {
                            e.stopPropagation()
                            quit()
                        }}
                    >
                        <Image
                            src="/loading.svg"
                            alt="loading"
                            width={16}
                            height={16}
                            className={`${styles.loadingIcon} progressLoading`}
                        ></Image>
                        {item?.canSuspend ? <div className={styles.cube}></div> : null}
                    </div>
                </Tooltip>
            ) : (
                <div className={styles.deleteWrap}>
                    <div
                        onClick={(e) => {
                            e.stopPropagation()
                            setCurrent(item.taskId)
                        }}
                        className={styles.deletePonit}
                    >
                        <Image src="/more.svg" alt="loading" width={16} height={16}></Image>
                    </div>
                    {current === item.taskId ? (
                        <div
                            ref={ref}
                            className={`ag14 ${styles.delete}`}
                            onClick={async (e) => {
                                e.stopPropagation()
                                await deleteTask({ taskId: item.taskId })
                                if (taskId === item.taskId) {
                                    setTaskId(null)
                                }
                                getTaskList()
                            }}
                        >
                            <Image
                                src="/trash.svg"
                                width={14}
                                height={14}
                                alt="delete"
                                className={styles.deleteIcon}
                            ></Image>
                            <span>{t('delete')}</span>
                        </div>
                    ) : null}
                </div>
            )}
        </>
    )
}
export default TaskStatus
