import styles from './style.module.css'
import Image from 'next/image'
import Task from './components/Task'
import { useContext } from 'react'
import Edit from '@/components/Nav/components/Edit'
import Agent from './components/Agent'
import AppContext from '@/components/hooks/createContext'
import { taskExecutionStars, taskExecutions } from '@/pages/api/base'
import AgentTips from './components/AgentTips'

const Nav = () => {
    const {
        taskId: [taskId],
        inferResult: [, setInferResult],
        inferStarList: [, setInferStarList],
        taskDetail,
        segementModal: [segementModal],
        showEdit: [showEdit, setShowEdit],
        requestLoading: [, setRequestLoading],
        agentName: [agentName],
        startTaskExecutions: [, setStartExecutions],
        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
    } = useContext(AppContext)!

    // change task
    const changeTaskTab = async () => {
        setStartExecutions(false)
        const { list = [] } = (await taskExecutions({ taskId, noShowToast: true, page: 1 })) || {}
        if (list?.length) {
            setInferResult(list)
            getStartList()
            taskDetail()
            setShowEdit(false)
            setStartExecutions(true)
        } else {
            taskDetail()
            setInferResult([])
            setInferStarList([])
            setShowEdit(true)
        }
    }

    const getStartList = async () => {
        const value = await taskExecutionStars({ taskId })
        setInferStarList(value ?? [])
    }

    const editAgain = async () => {
        if (!showEdit) {
            const logParam = window?.logger.getParams('10000002', window?.logger.EVENT_TYPE.CLICK, {
                taskId,
                agentName,
            })
            window?.logger.log([logParam])
            setRequestLoading(true)
            await taskDetail()
            setRequestLoading(false)
        }
        setShowEdit(!showEdit)
    }

    return (
        <div className={styles.nav}>
            <Agent></Agent>

            <div className={styles.task}>
                <AgentTips></AgentTips>
                <Task onChange={changeTaskTab}></Task>
            </div>

            <div className={styles.openEdit}>
                {showEdit && taskId && (
                    <>
                        <div
                            className={styles.mask}
                            onClick={() => {
                                setShowEdit(false)
                            }}
                        ></div>
                        <Edit
                            // key={taskId}
                            infer={() => {
                                changeTaskTab()
                            }}
                        ></Edit>
                    </>
                )}
                {taskId ? (
                    <div
                        className={`${styles.openIcon} ${showEdit && styles.open} ${
                            segementModal ? styles.close : ''
                        }`}
                        onClick={() => {
                            editAgain()
                        }}
                    >
                        <Image
                            src="/dropDown.svg"
                            alt="arrow"
                            width={16}
                            height={16}
                            className={showEdit ? styles.show : styles.close}
                        ></Image>
                    </div>
                ) : null}
            </div>
        </div>
    )
}

export default Nav
