import styles from './style.module.css'
import { InferResultRes, InferResultItem } from '@/pages/api/base/type'
import CustomModal from '@/components/Modal'
import { IMAGE_WATER_MASK, SHOW_WATER_MASK } from '@/common/constans/international'
import InferItem from '../InferItem'
import { useEffect, useState } from 'react'
import NextImage from 'next/image'
import { Image } from 'antd'

interface Iporps {
    item: InferResultRes
}

const Detail = ({ item }: Iporps) => {
    const [open, setOpen] = useState(false)
    const [activeIndex, setActiveIndex] = useState(-1)
    const [list, setList] = useState<InferResultItem[]>([])

    useEffect(() => {
        const successItems = item?.result?.filter((itemData) => itemData?.status === 'Success')
        setList(successItems || [])
    }, [item])

    const changeImage = (type: number) => {
        if (type && activeIndex < list?.length - 1) {
            setActiveIndex((prevActiveIndex) => prevActiveIndex + 1)
        } else if (!type && activeIndex > 0) {
            setActiveIndex((prevActiveIndex) => prevActiveIndex - 1)
        }
    }

    const handleKeyDown = (event: KeyboardEvent) => {
        if (event.keyCode === 37) {
            // 左箭头键
            changeImage(0)
        } else if (event.keyCode === 39) {
            // 右箭头键
            changeImage(1)
        }
    }

    useEffect(() => {
        window.addEventListener('keydown', handleKeyDown)
        return () => {
            window.removeEventListener('keydown', handleKeyDown)
        }
    }, [activeIndex])

    const outsideClick = (event) => {
        const clickedElement = event.target
        if (clickedElement.id === 'caseDetail' || clickedElement.classList.contains('ant-image')) {
            setOpen(false)
        }
    }

    return (
        <div className={styles.detail}>
            <div className={styles.imageWrap}>
                {item?.result?.map((itemData, index) => {
                    return (
                        <InferItem
                            itemType="page"
                            key={index}
                            item={item}
                            itemData={itemData}
                            previewIndexChange={() => {
                                const index = list.findIndex((it) => it.id == itemData.id)
                                setActiveIndex(index)
                                setOpen(true)
                            }}
                        ></InferItem>
                    )
                })}
            </div>
            <CustomModal
                width={'100%'}
                title=""
                isModalOpen={open}
                setIsModalOpen={setOpen}
                className={styles.detailModal}
            >
                <div className={`ag16 ${styles.head}`}>
                    {activeIndex + 1} / {list?.length}
                </div>
                <div className={styles.showDetail} id="caseDetail" onClick={outsideClick}>
                    <div className={styles.head}>
                        <div
                            className={styles.closeModalIcon}
                            onClick={() => {
                                setOpen(false)
                            }}
                        >
                            <NextImage
                                src="/close.svg"
                                width={24}
                                height={24}
                                alt="close"
                            ></NextImage>
                        </div>
                    </div>

                    <div
                        className={`${styles.changeBtn} ${
                            activeIndex == 0 ? styles.changeBtnDisable : null
                        }`}
                        onClick={() => changeImage(0)}
                    >
                        <NextImage
                            src="/arrow_white.svg"
                            width={18}
                            height={18}
                            alt="pre"
                            className={styles.preIcon}
                        ></NextImage>
                    </div>

                    {item?.showImage ? (
                        <div className={`${styles.content} ${styles.originImage}`} id="originImage">
                            <Image
                                src={item.showImage}
                                alt="origin-iamge"
                                className={styles.image}
                                preview={false}
                            ></Image>
                        </div>
                    ) : null}

                    <div className={`${styles.content} ${styles.finalImage}`} id="finalImage">
                        <Image
                            src={list[activeIndex]?.finalImage || ''}
                            alt="origin-iamge"
                            className={styles.image}
                            preview={false}
                        ></Image>
                    </div>

                    <div
                        className={`${styles.changeBtn} ${
                            activeIndex == list?.length - 1 ? styles.changeBtnDisable : null
                        }`}
                        onClick={() => changeImage(1)}
                    >
                        <NextImage
                            src="/arrow_white.svg"
                            width={18}
                            height={18}
                            alt="pre"
                        ></NextImage>
                    </div>

                    {SHOW_WATER_MASK ? (
                        <NextImage
                            src={IMAGE_WATER_MASK}
                            width={200}
                            height={74}
                            alt="water-mask"
                            className={styles.waterMask}
                        ></NextImage>
                    ) : null}
                </div>
            </CustomModal>
        </div>
    )
}

export default Detail
