import styles from './styles.module.css'
import { PROMPT_TYPE } from '@/common/constans'
import { Tabs } from 'antd'
import { useContext, useEffect, useState } from 'react'
import OriginImgDiff from '../OriginImgDiff'
import TextDescription from '../TextDescription'
import { useTranslation } from 'next-i18next'
import Retask from '../Retask'
import EditImage from '../EditImage'
import TextPrompt from '../TextPrompt'
import Template from '../Template'
import AppContext from '@/components/hooks/createContext'
import Replicate from '../Replicate'

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

    const [contentMinHeight, setContentMinHeight] = useState(0)

    useEffect(() => {
        const updateComponentHeight = () => {
            const parent = document.getElementById('myEdit')
            const tabs = document.getElementById('tabs')
            const opreate = document.getElementById('opreate')
            if (parent && tabs && opreate) {
                const minHeight =
                    parent.offsetHeight - tabs.offsetHeight - opreate.offsetHeight - 36 //这个值试出来的。。
                setContentMinHeight(minHeight < 0 ? 0 : minHeight)
            }
        }

        updateComponentHeight()

        window.addEventListener('resize', updateComponentHeight)
        return () => {
            window.removeEventListener('resize', updateComponentHeight)
        }
    }, [])

    const promptTypes = PROMPT_TYPE.map((item) => {
        return {
            key: item.key,
            label: t('paramType', { returnObjects: true })[item.key],
        }
    })

    return (
        <>
            {agentName === 'replicate' ? <Replicate></Replicate> : null}
            <EditImage isSDImg={false}></EditImage>
            <div className={styles.promptContent}>
                <div className={styles.tabsContent} id="tabs">
                    <Tabs
                        activeKey={taskResult.paramType}
                        items={promptTypes.filter((item) => {
                            return item.key !== 'replicate'
                        })}
                        onChange={(value) => {
                            const logParam = window?.logger.getParams(
                                '10000003',
                                window?.logger.EVENT_TYPE.CLICK,
                                {
                                    taskId,
                                    agentName,
                                    type: value,
                                },
                            )
                            window?.logger.log([logParam])
                            handleTaskResult('paramType', value)
                        }}
                    />
                </div>
                <div style={{ minHeight: contentMinHeight + 'px' }}>
                    {taskResult.paramType === 'prompt' ? (
                        <>
                            <OriginImgDiff></OriginImgDiff>
                            <TextPrompt></TextPrompt>
                        </>
                    ) : taskResult?.paramType === 'textDescription' ? (
                        <TextDescription></TextDescription>
                    ) : taskResult?.paramType === 'replicate' ? (
                        <Retask></Retask>
                    ) : taskResult?.paramType === 'template' ? (
                        <Template
                            agentName={
                                agentName === 'replicate'
                                    ? taskResult.replicateFromTaskAgentName ?? ''
                                    : agentName
                            }
                        ></Template>
                    ) : null}
                </div>
            </div>
        </>
    )
}

export default CommonTask
