import { useEffect, useContext, useState } from 'react'
import { getTemplate } from '@/pages/api/base'
import AppContext from '@/components/hooks/createContext'
import { useTranslation } from 'next-i18next'
import Race from './components/Race'
import Tags from './components/Tags'
import { RACR_AGENT } from '@/common/constans'

import CustomImageSelect from '@/components/CustomImageSelect'
import styles from './style.module.css'

interface IProps {
    agentName: string | null
}

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

    const [templateList, setTemplateList] = useState([])

    useEffect(() => {
        if (!taskId || !agentName) return
        const template = async () => {
            const value = await getTemplate({
                agentName,
                agentVersion: taskResult?.agentVersion,
            })
            setTemplateList(value)
        }
        template()
    }, [taskId, agentName, taskResult?.agentVersion])

    return (
        <>
            {RACR_AGENT.includes(agentName || '') ? (
                <>
                    <Race agentName={agentName}></Race>
                    <Tags agentName={agentName}></Tags>
                </>
            ) : null}
            <div className={styles.content}>
                {templateList?.length ? (
                    <CustomImageSelect
                        list={templateList}
                        label={t('templateObj.location')}
                        type="locationId"
                    ></CustomImageSelect>
                ) : null}
            </div>
        </>
    )
}

export default Template
