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

const versionList = [
    {
        key: 'v1.5',
        value: 'v1.5',
    },
    {
        key: 'v1.0',
        value: 'v1.0',
    },
]
const AgentVersionSelect = () => {
    const { t } = useTranslation('studio')

    const {
        taskResult: [taskResult, setTaskResult],
        userInfos: [userInfos, setUserInfos],
        handleTaskResult,
        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
    } = useContext(AppContext)!

    const [showAgentVersion, setShowAgentVersion] = useState(false)
    const agentVersionRef = useRef<HTMLDivElement>(null)

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

    const changeAgentVersion = async (item) => {
        if (taskResult.paramType === 'template') {
            setTaskResult({ ...taskResult, fashionModelId: 0, locationId: 0, tagIds: [] })
        }
        handleTaskResult('agentVersion', item.key)
        setShowAgentVersion(false)
        const data = await setDefaultAgentVersion({ agentVersion: item.key })
        if (data) {
            setUserInfos({
                ...userInfos,
                agentVersion: item.key,
            })
        }
    }

    return (
        <div
            className={styles.agentVersion}
            onClick={() => {
                setShowAgentVersion(true)
            }}
            ref={agentVersionRef}
        >
            <Image src="/agentVersion.svg" alt="agentVersion" width={20} height={20}></Image>
            {showAgentVersion ? (
                <div className={styles.batchWrap}>
                    {versionList?.map((item, key) => {
                        return (
                            <div
                                className={`ag14 ${styles.batchItem} ${
                                    taskResult?.agentVersion === item.key ? styles.activeKey : ''
                                }`}
                                onClick={(e) => {
                                    e.stopPropagation()
                                    changeAgentVersion(item)
                                }}
                                key={key}
                            >
                                <span>{item.value}</span>
                                {(userInfos?.agentVersion ? userInfos.agentVersion : 'v1.5') ===
                                item.key ? (
                                    <span className={styles.itemDefault}>{t('default')}</span>
                                ) : null}
                            </div>
                        )
                    })}
                </div>
            ) : null}
        </div>
    )
}

export default AgentVersionSelect
