import * as React from "react"
import {
    Frame,
    addPropertyControls,
    ControlType,
    useMotionValue,
    useAnimation,
    animate,
    Color,
} from "framer"

export function Countdown(props) {
    const { startTime, animationDuration, ...rest } = props
    var h = 0
    var m = 0
    var s = 0
    var hoursInMs = 3600 * h * 1000
    var minutesInMs = m * 60 * 1000
    var secondsInMS = s * 1000
    let r = useMotionValue(0)
    const [value, setValue] = React.useState(props.startTime)
    let controls
    const invisBG = Color({ r: 255, g: 255, b: 255, a: 0 })

    function animateText(start, end, duration) {
        controls = animate(start, end, {
            duration: duration,
            ease: "linear",
            onUpdate: (v) => {
                // turn v into hours and minutes
                var rounded = Math.ceil(v)
                var time = parseMillisecondsIntoReadableTime(rounded)
                setValue(time)
            },
            onComplete: (v) => {
                //console.log(v)
            },
        })
    }

    function parseMillisecondsIntoReadableTime(milliseconds) {
        //Get hours from milliseconds
        var hours = milliseconds / (1000 * 60 * 60)
        var absoluteHours = Math.floor(hours)
        var h = absoluteHours > 9 ? absoluteHours : "0" + absoluteHours

        //Get remainder from hours and convert to minutes
        var minutes = (hours - absoluteHours) * 60
        var absoluteMinutes = Math.floor(minutes)
        var m = absoluteMinutes > 9 ? absoluteMinutes : "0" + absoluteMinutes

        //Get remainder from minutes and convert to seconds
        var seconds = (minutes - absoluteMinutes) * 60
        var absoluteSeconds = Math.floor(seconds)
        var s = absoluteSeconds > 9 ? absoluteSeconds : "0" + absoluteSeconds

        return h + ":" + m + ":" + s
    }

    // use like
    const startCountdown = () => {
        var time = props.startTime.split(":")
        h = time[0]
        m = time[1]
        s = time[2]

        hoursInMs = 3600 * h * 1000
        minutesInMs = m * 60 * 1000
        secondsInMS = s * 1000

        r.set(Number(hoursInMs + minutesInMs + secondsInMS))
        animateText(r, 0, props.animationDuration)
    }

    React.useEffect(() => {
        startCountdown()
    }, [])

    return (
        <Frame
            {...rest}
            background={invisBG}
            style={{
                color: "#000",
                fontSize: 32,
                fontWeight: 600,
            }}
        >
            {value}
        </Frame>
    )
}

Countdown.defaultProps = {
    startTime: "10:00:00",
    animationDuration: "3600",
}

addPropertyControls(Countdown, {
    startTime: {
        title: "Time",
        type: ControlType.String,
        placeholder: "00:00:00",
    },
    animationDuration: {
        title: "Animation Duration (in seconds)",
        type: ControlType.Number,
        defaultValue: 5, // in seconds
    },
})