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

export function withFloatingAndRotating(Component): ComponentType {
    return (props) => {
        const controls = useAnimation()

        const maxHeight = -42 // max height
        // don't change these values below
        const pauseDuration = props.pauseDuration || 2
        const startDelay = props.startDelay || 0
        const spinStartDelay = props.spinStartDelay || 1

        const startAnimations = () => {
            controls.start({
                y: [0, maxHeight, 0],
                transition: {
                    duration: 3,
                    times: [0, 0.5, 1],
                    ease: "easeInOut",
                    repeat: Infinity,
                },
            })

            setTimeout(() => {
                controls.start({
                    rotateY: 360,
                    transition: {
                        duration: 1,
                        repeat: Infinity,
                        repeatDelay: pauseDuration,
                        ease: "easeInOut",
                    },
                })
            }, spinStartDelay * 1000)
        }

        useEffect(() => {
            const timeoutId = setTimeout(startAnimations, startDelay * 1000)

            return () => clearTimeout(timeoutId)
        }, [controls, startDelay, spinStartDelay])

        return (
            <Component
                {...props}
                as={motion.div}
                style={{
                    ...props.style,
                    transformOrigin: "center",
                }}
                animate={controls}
            />
        )
    }
}