import { motion, useAnimation } from "framer-motion"
import React, { useEffect } from "react"
import type { ComponentType } from "react"

// Control height of levitation
const maxHeight = -42 // max height
const minHeight = -15 // min height

// Animation Controls
const duration = 3.5
const times = [0, 0.5, 1]
const ease = "easeInOut"
const repeat = Infinity

// Float to a specific value
export function withSpecificValue(Component): ComponentType {
    return (props) => {
        const controls = useAnimation()

        useEffect(() => {
            controls.start({
                y: [0, maxHeight, 0],
                transition: {
                    duration: duration,
                    times: times,
                    ease: ease,
                    repeat: repeat,
                },
            })
        }, [controls])

        return <Component {...props} as={motion.div} animate={controls} />
    }
}

// Float to a random value
export function withRandomValue(Component): ComponentType {
    return (props) => {
        const controls = useAnimation()

        useEffect(() => {
            const randomHeight =
                Math.floor(Math.random() * (maxHeight - minHeight + 1)) +
                minHeight

            controls.start({
                y: [0, randomHeight, 0],
                transition: {
                    duration: duration,
                    times: times,
                    ease: ease,
                    repeat: repeat,
                },
            })
        }, [controls])

        return <Component {...props} as={motion.div} animate={controls} />
    }
}