import { Override } from "framer"
import { useState, useEffect, useRef } from "react"
import { useTransform, useViewportScroll, useInView } from "framer-motion"

// Created by FramerOverrides.com

// CONTROLS FOR NUMBER 1
const START_NUMBER1 = 0
const END_NUMBER1 = 10000
const DURATION_SECONDS1 = 0.6
// END OF CONTROLS

// CONTROLS FOR NUMBER 2
const START_NUMBER2 = 0
const END_NUMBER2 = 350
const DURATION_SECONDS2 = 0.6
// END OF CONTROLS

// CONTROLS FOR NUMBER 3
const START_NUMBER3 = 4600
const END_NUMBER3 = 4
const DURATION_SECONDS3 = 0.6
// END OF CONTROLS

function useCountUp(start, end, durationSeconds) {
    const [count, setCount] = useState(start)
    const { scrollY } = useViewportScroll()
    const ref = useRef()
    const isInView = useInView(ref)

    useEffect(() => {
        if (isInView) {
            const steps = durationSeconds * 60 // 60 FPS
            const increment = (end - start) / steps
            const interval = setInterval(() => {
                setCount((prevCount) => {
                    const nextCount = prevCount + increment
                    if (nextCount >= end) {
                        clearInterval(interval)
                        return end
                    }
                    return nextCount
                })
            }, 1000 / 60) // 60 FPS
            return () => clearInterval(interval)
        }
    }, [start, end, durationSeconds, isInView])

    return { count: Math.round(count), ref }
}

export function CountUpNumber1(): Override {
    const { count, ref } = useCountUp(
        START_NUMBER1,
        END_NUMBER1,
        DURATION_SECONDS1
    )

    return {
        text: count.toLocaleString(),
        ref: ref,
    }
}

export function CountUpNumber2(): Override {
    const { count, ref } = useCountUp(
        START_NUMBER2,
        END_NUMBER2,
        DURATION_SECONDS2
    )

    return {
        text: count.toLocaleString(),
        ref: ref,
    }
}

export function CountUpNumber3(): Override {
    const { count, ref } = useCountUp(
        START_NUMBER3,
        END_NUMBER3,
        DURATION_SECONDS3
    )

    return {
        text: count.toLocaleString(),
        ref: ref,
    }
}

function useCountdown(start, end, durationSeconds) {
    const [count, setCount] = useState(start)
    const { scrollY } = useViewportScroll()
    const ref = useRef()
    const isInView = useInView(ref)

    useEffect(() => {
        if (isInView) {
            const steps = durationSeconds * 60 // 60 FPS
            const decrement = (start - end) / steps
            const interval = setInterval(() => {
                setCount((prevCount) => {
                    const nextCount = prevCount - decrement
                    if (nextCount <= end) {
                        clearInterval(interval)
                        return end
                    }
                    return nextCount
                })
            }, 1000 / 60) // 60 FPS
            return () => clearInterval(interval)
        }
    }, [start, end, durationSeconds, isInView])

    return { count: Math.round(count), ref }
}

export function CountDownNumber1(): Override {
    const { count, ref } = useCountdown(
        START_NUMBER1,
        END_NUMBER1,
        DURATION_SECONDS1
    )
    return {
        text: count.toLocaleString(),
        ref: ref,
    }
}

export function CountDownNumber2(): Override {
    const { count, ref } = useCountdown(
        START_NUMBER2,
        END_NUMBER2,
        DURATION_SECONDS2
    )
    return {
        text: count.toLocaleString(),
        ref: ref,
    }
}

export function CountDownNumber3(): Override {
    const { count, ref } = useCountdown(
        START_NUMBER3,
        END_NUMBER3,
        DURATION_SECONDS3
    )
    return {
        text: count.toLocaleString(),
        ref: ref,
    }
}