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

const startDate = new Date("2023-01-01T00:00:00")

const calculateDifference = (countDirection: string) => {
    const now = new Date()
    let difference = now.getTime() - startDate.getTime()

    if (countDirection === "down") {
        difference = -difference // Invert difference for countdown
    }

    return difference
}

export function Days(Component): ComponentType {
    return (props) => {
        const [timeElapsed, setTimeElapsed] = useState("")
        const countDirection = props.countDirection || "up"

        const calculateTimeElapsed = () => {
            const difference = calculateDifference(countDirection)
            const days = Math.abs(
                Math.floor(difference / (1000 * 60 * 60 * 24))
            )
            return `${days}`
        }

        useEffect(() => {
            const timer = setInterval(() => {
                setTimeElapsed(calculateTimeElapsed())
            }, 1000)

            return () => {
                clearInterval(timer)
            }
        }, [countDirection])

        return <Component {...props} text={timeElapsed} />
    }
}

export function Hours(Component): ComponentType {
    return (props) => {
        const [timeElapsed, setTimeElapsed] = useState("")
        const countDirection = props.countDirection || "up"

        const calculateTimeElapsed = () => {
            const difference = calculateDifference(countDirection)
            const hours = Math.abs(
                Math.floor(
                    (difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
                )
            )
            return `${hours}`
        }

        useEffect(() => {
            const timer = setInterval(() => {
                setTimeElapsed(calculateTimeElapsed())
            }, 1000)

            return () => {
                clearInterval(timer)
            }
        }, [countDirection])

        return <Component {...props} text={timeElapsed} />
    }
}

export function Minutes(Component): ComponentType {
    return (props) => {
        const [timeElapsed, setTimeElapsed] = useState("")
        const countDirection = props.countDirection || "up"

        const calculateTimeElapsed = () => {
            const difference = calculateDifference(countDirection)
            const minutes = Math.abs(
                Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60))
            )
            return `${minutes}`
        }

        useEffect(() => {
            const timer = setInterval(() => {
                setTimeElapsed(calculateTimeElapsed())
            }, 1000)

            return () => {
                clearInterval(timer)
            }
        }, [countDirection])

        return <Component {...props} text={timeElapsed} />
    }
}

export function Seconds(Component): ComponentType {
    return (props) => {
        const [timeElapsed, setTimeElapsed] = useState("")
        const countDirection = props.countDirection || "up"

        const calculateTimeElapsed = () => {
            const difference = calculateDifference(countDirection)
            const seconds = Math.abs(Math.floor((difference / 1000) % 60))
            return `${seconds}`
        }

        useEffect(() => {
            const timer = setInterval(() => {
                setTimeElapsed(calculateTimeElapsed())
            }, 1000)

            return () => {
                clearInterval(timer)
            }
        }, [countDirection])

        return <Component {...props} text={timeElapsed} />
    }
}

export function Milliseconds(Component): ComponentType {
    return (props) => {
        const [timeElapsed, setTimeElapsed] = useState("")
        const countDirection = props.countDirection || "up"

        const calculateTimeElapsed = () => {
            const difference = calculateDifference(countDirection)
            const milliseconds = Math.abs(difference % 1000)
            return `${milliseconds}`
        }

        useEffect(() => {
            const timer = setInterval(() => {
                setTimeElapsed(calculateTimeElapsed())
            }, 1)

            return () => {
                clearInterval(timer)
            }
        }, [countDirection])

        return <Component {...props} text={timeElapsed} />
    }
}