import styles from './style.module.css'
import {
    POWER_DETAIL,
    POWER_DETAIL_LIST,
    SECHEDUCLE_STRATEGY,
} from '@/common/constans/international'
import Image from 'next/image'
import { useState, useContext, useEffect, useRef } from 'react'
import { Radio } from 'antd'
import AppContext from '@/components/hooks/createContext'

const BatchPowerDetail = () => {
    const [open, setOpen] = useState(false)
    const currentRef = useRef<HTMLDivElement>(null)

    useEffect(() => {
        const handleClickOutside = (event: MouseEvent) => {
            const target = event.target as HTMLElement
            if (currentRef.current && !currentRef.current.contains(target)) {
                setOpen(false)
            }
        }
        document.addEventListener('mousedown', handleClickOutside)
        return () => {
            document.removeEventListener('mousedown', handleClickOutside)
        }
    }, [currentRef])
    const {
        taskResult: [taskResult],
        handleTaskResult,
        batchTaskPowerDetail: [batchTaskPowerDetail],
        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
    } = useContext(AppContext)!
    return (
        <>
            <div
                className={`ag14 ${styles.detail}`}
                onClick={() => {
                    setOpen(!open)
                }}
            >
                {POWER_DETAIL}
                <Image
                    src={'./drop_down_active.svg'}
                    alt="drop-down"
                    className={`${styles.icon} ${open ? styles.open : ''}`}
                    width={14}
                    height={14}
                ></Image>
            </div>
            {open ? (
                <div className={styles.content} ref={currentRef}>
                    <div className={styles.head}>
                        <p className={`ag18 ${styles.title}`}>{POWER_DETAIL}</p>
                        <Image
                            src="/modal-close.svg"
                            width={18}
                            height={18}
                            alt="close"
                            className={styles.closeModalIcon}
                            onClick={() => {
                                setOpen(false)
                            }}
                        ></Image>
                    </div>
                    <div className={styles.list}>
                        {POWER_DETAIL_LIST?.map((item, key) => {
                            return (
                                <div className={`ag14 ${styles.item}`} key={key}>
                                    <p className={styles.label}>{item.label}</p>
                                    <div
                                        className={`${styles.value} ${
                                            item.powerNum ? styles.primaryColor : ''
                                        }`}
                                    >
                                        {item.key === 'totalExecuteCnt'
                                            ? `${batchTaskPowerDetail.checkPointCnt} * ${batchTaskPowerDetail.sdSamplingMethodCnt} * ${batchTaskPowerDetail.posPromptCnt} = `
                                            : null}

                                        {item.key === 'totalExecutePowerConsume' ? (
                                            <span
                                                className={styles.totalPower}
                                            >{`${batchTaskPowerDetail.totalExecuteCnt} * ${batchTaskPowerDetail.perExecutePowerConsume} = `}</span>
                                        ) : null}
                                        {item.powerNum ? (
                                            <Image
                                                src="/cpu-charge.svg"
                                                width={20}
                                                height={20}
                                                alt="cpu-charge"
                                                className={styles.cpuCharge}
                                            ></Image>
                                        ) : null}

                                        {batchTaskPowerDetail[item.key]}
                                    </div>
                                </div>
                            )
                        })}
                        {SECHEDUCLE_STRATEGY?.map((item, index) => {
                            return (
                                <div className={`ag14 ${styles.methodItem}`} key={index}>
                                    <Radio
                                        checked={item.key === taskResult?.scheduleStrategy}
                                        onChange={() => {
                                            handleTaskResult('scheduleStrategy', item.key)
                                        }}
                                    >
                                        <div className={styles.methodLable}>{item.label}</div>
                                    </Radio>
                                </div>
                            )
                        })}
                    </div>
                </div>
            ) : null}
        </>
    )
}

export default BatchPowerDetail
