import Image from 'next/image'
import styles from './style.module.css'
import Opreate from '@/components/ImageList/components/Opreate'
import { useState } from 'react'

interface IProps {
    data: any
    containerWidth: number
    jumpToDetail: (data: any) => void
    showOpreate: boolean
    starCallback: (unitId: string, star: boolean) => void
    unStars: string[]
    dataChange: (data: any) => void
}

const Item = ({
    data,
    dataChange,
    containerWidth,
    jumpToDetail,
    showOpreate,
    starCallback,
    unStars,
}: IProps) => {
    const [hover, setHover] = useState<string | null>(null)
    const [hold, setHold] = useState<string | null>(null)

    const getHeight = (path: string) => {
        if (!path) return
        const newUrl = path.replace('_preview.webp', '')
        const index1 = newUrl.lastIndexOf('_')
        const index2 = newUrl.lastIndexOf('.')
        const arr = newUrl.substring(index1 + 1, index2).split('x')
        const w = parseInt(arr[0], 10)
        const h = parseInt(arr[1], 10)
        return (containerWidth * h) / w
    }

    return (
        <div
            className={styles.imageWrap}
            style={{
                width: `${containerWidth}px`,
                height: `${getHeight(data.showImage)}px`,
            }}
            onMouseMove={() => {
                setHover(data.unitId)
            }}
            onMouseLeave={() => {
                setHover(null)
            }}
        >
            <Image
                src={data.showImage}
                width={containerWidth}
                height={100}
                onClick={() => {
                    jumpToDetail(data)
                }}
                alt="test"
                className={styles.image}
                unoptimized
            ></Image>
            {showOpreate && (hover == data.unitId || hold == data.unitId) ? (
                //taskName, executeSeq, index在星标中都没有
                <Opreate
                    executionInfo={{
                        taskId: data.taskId,
                        taskName: null,
                        executionId: data.executionId,
                        executeSeq: null,
                        agentVersion: data.agentVersion,
                    }}
                    imageInfo={{
                        unitId: data.unitId,
                        image: data.image,
                        isStar: !unStars.find((it) => it == data.unitId),
                        index: null,
                    }}
                    holdChange={setHold}
                    starCallback={starCallback}
                    submittedInfo={{
                        id: data.id,
                        isSubmitted: data.isSubmitted,
                        submittedChange: (it) => {
                            dataChange({
                                ...data,
                                isSubmitted: it,
                            })
                        },
                    }}
                ></Opreate>
            ) : null}
        </div>
    )
}

export default Item
