import { DropProps } from "ahooks/lib/useDrop"
import React, { useEffect, useRef, useState } from "react"

interface DropConProps {
    onChange?: (value: any) => void,
    isHoveringCon?: boolean,   // 是否拖进接收框
    draggingCon?: string | null,     // 是否已经开始拖动元素
    drop: DropProps,   // 设置元素为可接收拖动的元素区
    conOffset: { top: number, left: number, width: number },
    drawXY: { dragX: number, dragY: number },  // 鼠标位置
    index: number
}
function DropCon(props: DropConProps) {
    const { drop, conOffset, drawXY, onChange, isHoveringCon = false, draggingCon = null } = props

    const [isPropOpen, setIsPropOpen] = useState<boolean>(false)
    const ref: any = useRef(null)
    console.log("---22222---", isHoveringCon, draggingCon);
    useEffect(() => {
        console.log("---11111---", isHoveringCon, draggingCon);

        if (isHoveringCon) {
            setIsPropOpen(() => true)
        } else {
            setIsPropOpen(() => false)
            if (draggingCon) {
                if (drawXY.dragX > conOffset.left && drawXY.dragX < conOffset.left + conOffset.width) { // 在本接收器左右两端
                    if (drawXY.dragY < conOffset.top + ref.current?.offsetTop) { // 在本接收器上方小于50
                        let nBad = (conOffset.top + ref.current?.offsetTop) - drawXY.dragY
                        if (nBad < 60) {
                            setIsPropOpen(() => true)
                        } else {
                            setIsPropOpen(() => false)
                        }
                    } else if (drawXY.dragY > (conOffset.top + ref.current?.offsetTop + ref.current?.offsetHeight)) {
                        let nBad = drawXY.dragY - (conOffset.top + ref.current?.offsetTop + ref.current?.offsetHeight)
                        if (nBad < 80) {
                            setIsPropOpen(() => true)
                        } else {
                            setIsPropOpen(() => false)
                        }
                    }
                }
            } else {
                setIsPropOpen(() => false)
            }
        }
    }, [drawXY, conOffset, draggingCon, ref.current?.offsetTop, ref.current?.offsetHeight, isHoveringCon])
    useEffect(() => {

    }, [ref.current?.offsetTop])
    return <div {...drop} className={`comptCon ${isHoveringCon && 'hovering'} ${isPropOpen && 'draggingCon1'}`} ref={ref}>
        {(isHoveringCon || isPropOpen) && '请拖至此处'}
    </div>
}

export default React.memo(DropCon, (prevProps, nextProps) => {
    let _prev = JSON.stringify(prevProps)
    let _next = JSON.stringify(nextProps)
    return _prev === _next
})