import React, {FC, HTMLInputTypeAttribute, ReactElement, useEffect, useState} from "react"
import {useParams} from "react-router-dom";
import useAxiosTools from "../../hooks/AxiosTools";
import {timeTracker, toDo} from "../../utilities/types";

const ToDoShow = () => {

    const {id} = useParams()
    console.log(id)
    const {setLoading, errorCatch, errorLabel, axiosGet, axiosPut} = useAxiosTools(true)
    const [toDo, setToDo] = useState<toDo|null>(null)

    useEffect(() => {
        fetchToDo()
    }, [])

    const fetchToDo = async () => {
        try {
            const res = await axiosGet('/api/todos/' + id)
            setToDo(res.data)
        } catch (error) {
            errorCatch(error)
        } finally {
            setLoading(false)
        }
    }


    return <div>
        <h1>{toDo?.name}</h1>
        <h1>{toDo?.description}</h1>

        {toDo && <ToDoTimeTrackers toDo={toDo} />}
    </div>
}

export default ToDoShow

const ToDoTimeTrackers: FC<ToDoTimeTrackers> = ({toDo: toDo}) => {

    const {setLoading, errorCatch, errorLabel, axiosGet, axiosPut} = useAxiosTools(true)
    const [timeTrackers, setTimeTrackers] = useState<timeTracker[]>([])

    useEffect(() => {
        fetchTimeTrackers()
    }, [])

    const fetchTimeTrackers = async () => {
        try {
            const res = await axiosGet(`/api/todos/${toDo.id}/time-trackers`)
            setTimeTrackers(res.data)
        } catch (error) {
            errorCatch(error)
        } finally {
            setLoading(false)
        }
    }

    const timeSpend = () => {
        let timer = 0
        let more = false
        timeTrackers.forEach(timeTracker => {
            if (! timeTracker.end_at) {
                more = true
            } else {
                timer += ((new Date(timeTracker.end_at)).getTime()) - (new Date(timeTracker.start_at)).getTime()
            }
        })

        timer = Math.floor(timer / 1000)
        return (more ? '+' : '') + timer.durationify()
        // let hours = Math.floor(timer / 3600)
        // let minutes = Math.floor((timer - hours * 3600) / 60)
        // let secondes = timer - hours * 3600 - minutes * 60
        // return `${more ? '+' : ''} ${hours}:${String(minutes).padStart(2, '0')}:${String(secondes).padStart(2, '0')}`
    }

    return <div>
        <div>Temps passé : {timeSpend()}</div>
        <table className="mx-auto">
            <thead>
            <tr>
                <th>Début</th>
                <th>Fin</th>
                <th>Différence</th>
            </tr>
            </thead>
            <tbody>
            {timeTrackers.map(timeTracker => <tr key={timeTracker.id} className="text-center">
                <td>{timeTracker.start_at ? (new Date(timeTracker.start_at)).toSmallFrDate() : ''}</td>
                <td>{timeTracker.end_at ? (new Date(timeTracker.end_at)).toSmallFrDate() : ''}</td>
                <td className="text-right">{timeTracker.start_at && timeTracker.end_at ? (new Date(timeTracker.end_at)).difference(new Date(timeTracker.start_at)) : ''}</td>
            </tr>)}
            </tbody>
        </table>
    </div>
}

interface ToDoTimeTrackers {
    toDo: toDo,
}