import React, {FC, useEffect, useState} from "react"
import useAxiosTools from "../../hooks/AxiosTools"
import {toDo} from "../../utilities/types"
import {Link} from "react-router-dom"
import useTracker from "../../hooks/TraskerHook"
import {DraggableSVG, PauseSVG, PlaySVG} from "../SVG"

const ToDoIndex: FC<ToDoIndexProps> = ({reload, setReload}) => {

    const {loading, setLoading, errorCatch, errorLabel, axiosGet, axiosPut} = useAxiosTools(true)
    const [toDos, setToDos] = useState<toDo[]>([])
    const {currentTimeTracker, startTrackToDo, stopCurrentTimeTrack} = useTracker()

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

    useEffect(() => {
        if (reload && !loading) {
            fetchToDos()
        }
    }, [reload])

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

    const toggleCheck = async (toDo: toDo) => {
        console.log(toDo)
        try {
            await axiosPut('api/todos/' + toDo.id, {checked: ! toDo.checked})
            setReload(new Date())
            await fetchToDos()
        } catch (error) {
            errorCatch(error)
        } finally {
            setLoading(false)
        }
    }

    return <>
        {errorLabel()}
        <ul className="my-5">
            {toDos.map(toDo => <li key={toDo.id} className="flex gap-2">
                <span><DraggableSVG className="w-6" /></span>
                <input type={"checkbox"}
                       checked={!!toDo.checked}
                       onChange={() =>toggleCheck(toDo)}
                       className=""/>
                <Link to={"/todos/" + toDo.id}
                      className={`${toDo.checked ? 'line-through' : ''} flex flex-1 justify-between`}>
                    <span>{toDo.name}</span>
                    <span className="mr-2 text-sm text-gray-400">{toDo.duration.durationify()}</span>
                </Link>
                {toDo.id === currentTimeTracker?.to_do?.id
                    ? <button className="flex w-7  cursor-pointer items-center justify-center"
                              type="button"
                              title="Commencer"
                              onClick={stopCurrentTimeTrack}>
                        <PauseSVG className="w-7"/>
                      </button>
                    : <button className="flex  w-7 cursor-pointer items-center justify-center"
                              type="button"
                              title="Commencer"
                              onClick={() => startTrackToDo(toDo)}>
                        <PlaySVG className="w-4"/>
                    </button>}
            </li>)}
        </ul>
    </>
}

export default ToDoIndex

interface ToDoIndexProps {
    reload: Date | null,
    setReload: (date: Date) => void,
}