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 {Simulate} from "react-dom/test-utils";
import load = Simulate.load;
import {DraggableSVG, PlaySVG} from "../SVG";

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

    const {loading, setLoading, errorCatch, errorLabel, axiosGet, axiosPut} = useAxiosTools(true)
    const [toDos, setToDos] = useState<toDo[]>([])
    const {startTrackToDo} = 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-1 flex justify-between`}>
                    <span>{toDo.name}</span>
                    <span className="text-gray-400 text-md mr-2">{toDo.duration} s</span>
                </Link>
                {!toDo.checked && <span className="cursor-pointer flex items-center"
                                        title="Commencer"
                                        onClick={() => startTrackToDo(toDo)}>
                    <PlaySVG className="w-4" />
                </span>}
            </li>)}
        </ul>
    </>
}

export default ToDoIndex

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