/* eslint-disable @next/next/no-img-element */
import styles from './style.module.css'
import { useEffect, useState } from 'react'
import { getShowCaseDetail } from '@/pages/api/base'
import { IshowCaseDeatil } from '@/pages/api/base/type'
import CustomModal from '@/components/Modal'
import Image from 'next/image'
import DetailPrompt from './ShowPrompt'
import { IMAGE_WATER_MASK, IS_SUBMIT_TASK, SHOW_WATER_MASK } from '@/common/constans/international'
import StarToTask from './StarToTask'

interface Iporps {
    setShowDetail: (value: boolean) => void
    id: string
    showDetail: boolean
    tag: string
    isSubmitted?: boolean
    setSubmitted: (submitted: boolean) => void
}

const Detail = ({ setShowDetail, showDetail, id, tag, isSubmitted, setSubmitted }: Iporps) => {
    const [showCaseInfo, setInfo] = useState<IshowCaseDeatil>({ isSubmitted: false })
    const [originHover, setOriginHover] = useState(false)
    const [finalImageHover, setFinalHover] = useState(false)
    const [height, setHeight] = useState(0)
    const [width, setWidth] = useState(0)

    useEffect(() => {
        if (!id) return
        getInfo()
    }, [id])

    const getInfo = async () => {
        const value = (await getShowCaseDetail({ id, tag })) as IshowCaseDeatil
        if (value?.finalImage) {
            setInfo(value)
        }
    }

    const outsideClick = (event) => {
        const clickedElement = event.target
        if (
            document.getElementById('caseDetail') === clickedElement ||
            document.getElementById('originImage') === clickedElement ||
            document.getElementById('finalImage') === clickedElement
        ) {
            setShowDetail(false)
        }
    }

    return (
        <div className={styles.detail}>
            {showCaseInfo?.finalImage ? (
                <CustomModal
                    width={'100%'}
                    title=""
                    isModalOpen={showDetail}
                    setIsModalOpen={setShowDetail}
                    className={styles.detailModal}
                >
                    <div className={styles.showDetail} id="caseDetail" onClick={outsideClick}>
                        <div className={styles.head}>
                            <div className={styles.closeModalIcon}>
                                <Image
                                    src="/close.svg"
                                    width={24}
                                    height={24}
                                    alt="close"
                                    onClick={() => {
                                        setShowDetail(false)
                                    }}
                                ></Image>
                            </div>
                        </div>
                        {showCaseInfo?.image ? (
                            <div
                                className={styles.originImage}
                                id="originImage"
                                onMouseMove={() => {
                                    setOriginHover(true)
                                }}
                                onMouseLeave={() => setOriginHover(false)}
                            >
                                <img
                                    src={showCaseInfo?.image || ''}
                                    alt="origin"
                                    className={`${styles.image} ${originHover ? styles.hover : ''}`}
                                ></img>
                                {originHover && showCaseInfo?.maskBase64 ? (
                                    <img
                                        src={showCaseInfo?.maskBase64 || ''}
                                        alt="maskBase"
                                        className={styles.maskBase64}
                                    ></img>
                                ) : null}
                            </div>
                        ) : null}

                        <div
                            className={`${styles.finalImage} ${
                                showCaseInfo?.image ? '' : styles.noOrigin
                            }`}
                            id="finalImage"
                            onMouseMove={() => {
                                const element = document.getElementById('showCaseFinal')
                                if (element) {
                                    setHeight(element.clientHeight)
                                    setWidth(element?.clientWidth)
                                }

                                setFinalHover(true)
                            }}
                            onMouseLeave={() => setFinalHover(false)}
                        >
                            <img
                                src={showCaseInfo?.finalImage || ''}
                                alt="origin"
                                className={styles.image}
                                id="showCaseFinal"
                            ></img>
                            {finalImageHover ? (
                                <div
                                    className={styles.opreateWrap}
                                    style={{ height: height + 'px', width: width - 40 + 'px' }}
                                >
                                    {tag === 'star' && showCaseInfo && IS_SUBMIT_TASK ? (
                                        <div className={styles.starSub}>
                                            <StarToTask
                                                id={id}
                                                isSubmitted={isSubmitted}
                                                setSubmitted={setSubmitted}
                                            ></StarToTask>
                                        </div>
                                    ) : null}
                                    <DetailPrompt showCaseInfo={showCaseInfo}></DetailPrompt>
                                </div>
                            ) : null}
                        </div>

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

export default Detail
