import type { ComponentType } from "react"
import { createRef, useEffect, useRef } from "react"
import { useScroll, useTransform, useSpring } from "framer-motion"

// Scrub through a Lottie animation by scrolling while it is in view
export function withScrolledProgressInView(Component): ComponentType {
    return (props: any) => {
        const ref = useRef(null)

        const { scrollYProgress } = useScroll({
            target: ref,
            offset: ["end", "start"],
            layoutEffect: false, // fix required for sticky elements
        })

        const animationSpeed = useSpring(scrollYProgress, {
            stiffness: 20,
            damping: 20,
            //mass: 3.7,
        })

        return (
            <div ref={ref} style={props.style}>
                <Component {...props} progress={animationSpeed} />
            </div>
        )
    }
}

//        const animationProgress = useTransform(scrollYProgress, {
//            easing: "easeInOut",
//            outputRange: [0, 1],
//        })