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

interface IProps {
    agentName: string | null
}

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

    const [modelList, setModelList] = useState([])
    useEffect(() => {
        if (taskId) {
            const ethnicity = async () => {
                if (!taskId) return
                const models =
                    (await getModel({ agentName, agentVersion: taskResult?.agentVersion })) || []
                setModelList(models)
            }
            ethnicity()
        }
    }, [taskResult?.agentVersion])

    return (
        <div className={styles.race}>
            {modelList?.length ? (
                <CustomImageSelect
                    list={modelList}
                    label={t('templateObj.mask')}
                    type="fashionModelId"
                ></CustomImageSelect>
            ) : null}
        </div>
    )
}

export default Race
