import React, {useEffect, useState} from "react"
import useTracker from "../hooks/TraskerHook"
import {Link} from "react-router-dom";

const Tracker = () => {

    const [timer, setTimer] = useState('')
    const {currentTimeTracker, stopCurrentTimeTrack} = useTracker()

    useEffect(() => {
        setTimer(formatTimer(currentTimeTracker?.start_at))
    }, [currentTimeTracker])

    useEffect(() => {
        setTimeout(() => setTimer(formatTimer(currentTimeTracker?.start_at)), 1000)
    }, [timer]);

    const formatTimer = (startAt: string|null|undefined) => {
        if (!startAt) {
            return '--:--'
        }
        let timer = Math.floor(((new Date()).getTime() - (new Date(startAt)).getTime()) / 1000)
        let hours = Math.floor(timer / 3600)
        let minutes = Math.floor((timer - hours * 3600) / 60)
        let secondes = timer - hours * 3600 - minutes * 60
        return `${hours}:${String(minutes).padStart(2, '0')}:${String(secondes).padStart(2, '0')}`
    }

    return <div>
        {currentTimeTracker
            ? <div className="flex gap-2">
                <Link to={`/todos/${currentTimeTracker.to_do.id}`}>
                    {currentTimeTracker.to_do.name}
                </Link>
                <span>{timer}</span>
                <button onClick={stopCurrentTimeTrack}>Stop</button>
            </div>
            : <div>--:--</div>
        }
    </div>
}

export default Tracker