import Image from 'next/image'
import styles from './style.module.css'
import { useContext, useEffect, useState } from 'react'
import AppContext from '@/components/hooks/createContext'
import { useTranslation } from 'next-i18next'
import { GroupItem } from '..'

interface IProp {
    item: GroupItem
}

const AgentItem = ({ item }: IProp) => {
    const { t } = useTranslation('common')
    const {
        agentName: [agentName, setAgentName],
        inferResult: [, setInferResult],
        inferStarList: [, setInferStarList],
        taskId: [, setTaskId],
        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
    } = useContext(AppContext)!

    const [dot, setDot] = useState(false)

    useEffect(() => {
        if (item.needDot) {
            if (localStorage.getItem(`agent-${item.key}-clicked`)) {
                setDot(false)
            } else {
                setDot(true)
            }
        }
    }, [item.needDot])

    const dotHide = () => {
        if (item.needDot) {
            localStorage.setItem(`agent-${item.key}-clicked`, 'true')
            setDot(false)
        }
    }

    return (
        <div className={styles.tabsWrap}>
            <span className={`${styles.border} ${agentName === item.key && styles.active}`}></span>
            <div
                className={`${styles.tabsItem} ag12`}
                onClick={async () => {
                    dotHide()
                    try {
                        const logParam = window?.logger.getParams(
                            window?.logger.EID.COMMON_CLICK,
                            window?.logger.EVENT_TYPE.CLICK,
                            {
                                type: 'setAgentName',
                                group: item.key,
                            },
                        )
                        window?.logger.log([logParam])
                        setAgentName(item.key)
                        setTaskId(null)
                        setInferResult([])
                        setInferStarList([])
                    } catch (error) {
                        console.log(error)
                    } finally {
                    }
                }}
            >
                <Image
                    src={item.icon || ''}
                    width={48}
                    height={48}
                    alt="icon"
                    className={`${styles.tabIcon} ${agentName === item.key && styles.activeGroup}`}
                ></Image>
                {t('scene', { returnObjects: true })[item.key].simple}
                {item.beta ? <div className={styles.beta}>公测</div> : null}
                {item.floatIcon ? (
                    <Image
                        className={styles.floatIcon}
                        src={item.floatIcon}
                        height={16}
                        width={16}
                        alt="icon"
                    ></Image>
                ) : null}
                {dot ? <div className={styles.dot}></div> : null}
            </div>
        </div>
    )
}

export default AgentItem
