import type { ComponentType } from "react"
import { useEffect, useRef, useState } from "react"
import { motion, useMotionValue } from "framer-motion"

export function withFollowCursor(Component): ComponentType {
    return (props) => {
        // Create a motion value for the rotation
        const rotation = useMotionValue(0)

        // Create refs to store the cursor/touch position and the component reference
        const [position, setPosition] = useState(null)
        const componentRef = useRef()

        // Update the position on mouse move or touch move
        const handleMove = (event) => {
            let x, y
            if (event.changedTouches) { // if this is a touch event
                x = event.changedTouches[0].clientX
                y = event.changedTouches[0].clientY
            } else { // if this is a mouse event
                x = event.clientX
                y = event.clientY
            }
            setPosition({ x, y })
        }

        // Attach the move event listener to the window
        useEffect(() => {
            window.addEventListener("mousemove", handleMove)
            window.addEventListener("touchmove", handleMove)

            // Clean up the event listeners on unmount
            return () => {
                window.removeEventListener("mousemove", handleMove)
                window.removeEventListener("touchmove", handleMove)
            }
        }, [])

        // Calculate the angle and update the rotation continuously
        useEffect(() => {
            const updateRotation = () => {
                if (!componentRef.current || !position) return

                const rect = componentRef.current.getBoundingClientRect()
                const centerX = rect.left + rect.width / 2
                const centerY = rect.top + rect.height / 2

                const deltaY = position.y - centerY
                const deltaX = position.x - centerX
                const angle =
                    (Math.atan2(deltaY, deltaX) * (180 / Math.PI) + 360 + 90) %
                    360

                rotation.set(angle)
                requestAnimationFrame(updateRotation)
            }

            updateRotation()
        }, [position])

        return (
            <Component
                {...props}
                ref={componentRef}
                as={motion.div}
                style={{
                    ...props.style,
                    rotate: rotation,
                    transformOrigin: "center",
                }}
            />
        )
    }
}