import { Override, useAnimation } from "framer"
import { useEffect, useState } from "react"

function getRandomPercentage() {
    return Math.floor(Math.random() * 100) + 30
}

function createRandomBorderRadius() {
    return `${getRandomPercentage()}% ${getRandomPercentage()}% ${getRandomPercentage()}% ${getRandomPercentage()}% / ${getRandomPercentage()}% ${getRandomPercentage()}% ${getRandomPercentage()}% ${getRandomPercentage()}%`
}

export function RandomBlobEffect(): Override {
    const animation = useAnimation()
    const [intervalId, setIntervalId] = useState(null)

    const startAnimation = () => {
        const animateBlob = () => {
            animation.start({
                borderRadius: createRandomBorderRadius(),
                transition: { duration: 2.5 },
            })
        }

        const interval = setInterval(animateBlob, 1100)
        setIntervalId(interval)
        animateBlob()
    }

    const stopAnimation = () => {
        clearInterval(intervalId)
    }

    useEffect(() => {
        // Initial animation for a smooth start
        animation.start({
            borderRadius: createRandomBorderRadius(),
            transition: { duration: 1.5 },
        })

        return () => clearInterval(intervalId)
    }, [animation, intervalId])

    return {
        animate: animation,
        onMouseEnter: startAnimation,
        onMouseLeave: stopAnimation,
    }
}