import { Override } from "framer"
import { useRef, useState } from "react"

export function realisticDropEffect(): Override {
    const [isDragging, setIsDragging] = useState(false)
    const [dropY, setDropY] = useState(100)
    const [isAnimating, setIsAnimating] = useState(false)
    const ref = useRef(null)

    const handleMouseEnter = () => {
        if (!isDragging && !isAnimating) {
            setIsAnimating(true)
            setDropY(100)
        }
    }

    const handleAnimationEnd = () => {
        setIsAnimating(false)
    }

    const handleMouseDown = (event) => {
        setIsDragging(true)
        event.target.setPointerCapture(event.pointerId)
    }

    const handleMouseMove = (event) => {
        if (isDragging) {
            setDropY(event.clientY)
        }
    }

    const handleMouseUp = () => {
        setIsDragging(false)
        setDropY(100)
    }

    const handleMouseLeave = () => {
        setIsDragging(false)
        setDropY(100)
    }

    return {
        ref,
        style: {
            top: dropY,
            position: "absolute",
            transition: isDragging
                ? "none"
                : isAnimating
                ? "top 0.8s cubic-bezier(0.3, 2.4, 0.85, 2.5)"
                : "none",
        },
        onMouseEnter: handleMouseEnter,
        onMouseDown: handleMouseDown,
        onMouseMove: handleMouseMove,
        onMouseUp: handleMouseUp,
        onMouseLeave: handleMouseLeave,
        onAnimationComplete: handleAnimationEnd,
    }
}