import type { ComponentType } from "react"
import { useState, useEffect } from "react"

export function withCountdownTimer(Component): ComponentType {
    return (props) => {
        // Duration of countdown in milliseconds
        const countdownDuration = 10 * 60 * 1000 // 10 minutes
        // State to hold the end time
        const [endTime, setEndTime] = useState(null)
        // State to hold the remaining time
        const [remainingTime, setRemainingTime] = useState(countdownDuration)
        // State to hold the countdown status
        const [isRunning, setIsRunning] = useState(false)

        // Effect to start the timer when the isRunning state is true
        useEffect(() => {
            let timer = null
            if (isRunning) {
                setEndTime(Date.now() + remainingTime)
                timer = setInterval(() => {
                    const timeLeft = endTime - Date.now()
                    if (timeLeft <= 0) {
                        clearInterval(timer)
                        setRemainingTime(0)
                        setIsRunning(false)
                    } else {
                        setRemainingTime(timeLeft)
                    }
                }, 1000)
            } else {
                clearInterval(timer)
            }
            return () => clearInterval(timer)
        }, [isRunning, endTime, remainingTime])

        // Function to toggle the countdown status
        const toggleCountdown = () => {
            setIsRunning(!isRunning)
        }

        // Calculate minutes and seconds for display
        const minutes = Math.floor(remainingTime / 1000 / 60)
        const seconds = Math.floor((remainingTime / 1000) % 60)

        return (
            <Component
                {...props}
                onClick={toggleCountdown}
                text={
                    !isRunning && remainingTime === countdownDuration
                        ? "Start"
                        : `${minutes}:${seconds < 10 ? "0" + seconds : seconds}`
                }
            />
        )
    }
}