import {
    useElementBounding,
    useIntersectionObserver,
    useWindowSize,
} from '@vueuse/core'
import { ref } from 'vue'
import { mapRange, clamp } from '@/libs/math'
import useLenis from '@/composables/useLenis'

const { height: wHeight } = useWindowSize()

    const { height, top } = useElementBounding(el)

    const isIntersected = ref(false)
    const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
        isIntersected.value = isIntersecting
    })


        const pageTop = scroll + top.value

        const start = pageTop - wHeight.value * entry
        const end = pageTop + height.value - wHeight.value * exit

        let rawProgress = mapRange(start, end, scroll, 0, 1)
        rawProgress = clamp(0, rawProgress, 1)

        smoothProgress.value += (rawProgress - smoothProgress.value) * 0.1
        callback?.(smoothProgress.value)
    })


    return { destroy }
}
