import {React, useState} from "react";
import NavBar from "../nav-bar/nav-bar";
import './to-do.css'
import axios from "axios";

const ToDo = () => {
    var curr_event = window.localStorage.getItem("curr_event");
    var email = window.localStorage.getItem("email");
    var ls_tasks = JSON.parse(window.localStorage.getItem("tasks"));

    const [new_task, setNewInvitee] = useState("");
    const [tasks, setInvitees] = useState(ls_tasks)

    const handleDeleteInvitee = (e) => {
        e.preventDefault();
        // confirm if user wants to delete expense
        var result = window.confirm("Are you sure you want to delete this task?");

        // if confirmed
        if (result === true) {
            var deletedTask = e.target.value;
            // axios - remove invitee from backend
            const config = {
                method: "post",
                url: "http://localhost:3001/delete-task",
                data: {
                    curr_event,
                    email,
                    deletedTask
                },
            };

            axios(config)
            .then((result) => {
                // update local storage invitees
                window.localStorage.setItem("tasks", JSON.stringify(result.data.updated_tasks));

                // update state invitees
                setInvitees(result.data.updated_tasks);
            })
            .catch((error) => {
                console.log(error);
            });
        }
    }

    const handleCheckboxClick = (e) => {
        console.log("inside handleCheckboxClick");

        var task = e.target.value;

        // if checking
        if (e.target.checked === true) {
            const config = {
                method: "post",
                url: "http://localhost:3001/task-done",
                data: {
                    curr_event,
                    email,
                    task
                },
            };
            window.localStorage.setItem("tasks_done", parseInt(window.localStorage.getItem("tasks_done"))  + 1);
            axios(config)
            .then((result) => {
                // update local storage invitees
                window.localStorage.setItem("tasks", JSON.stringify(result.data.updated_tasks));

                // update state invitees
                setInvitees(result.data.updated_tasks);
            })
            .catch((error) => {
                console.log(error);
            });
        }

        // if unchecking
        else {
            const config = {
                method: "post",
                url: "http://localhost:3001/tasks-undone",
                data: {
                    curr_event,
                    email,
                    task
                },
            };
            window.localStorage.setItem("tasks_done", parseInt(window.localStorage.getItem("tasks_done")) - 1);
            axios(config)
            .then((result) => {
                // update local storage invitees
                window.localStorage.setItem("tasks", JSON.stringify(result.data.updated_tasks));
                
                // update state invitees
                setInvitees(result.data.updated_tasks);
            })
            .catch((error) => {
                console.log(error);
            });
        }
    }

    var html_tasks = [];
    if (tasks != null) {
        for (var i = 0; i < tasks.length; i++) {
            var checkbox = <div class="check"><label for={tasks[i]["name"]}><input class="checkboxx" type="checkbox" id={tasks[i]["name"]} 
                            onClick={handleCheckboxClick} value={tasks[i]["name"]}/>Done</label></div>
            // check checkbox if invitee is attending
            if (tasks[i]["done"] === true) {;
                checkbox = <div><label for={tasks[i]["name"]}><input type="checkbox" id={tasks[i]["name"]} onClick={handleCheckboxClick} defaultChecked = {true} value={tasks[i]["name"]}/>Done</label></div>
            }
            html_tasks.push(<div><li class="tasks">{tasks[i]["name"]} <button class="dele" value={tasks[i]["name"]} onClick={(e) => {handleDeleteInvitee(e)}}>Remove</button>{checkbox}</li></div>)
        }
    }

    const handleInvite = (e) => {
        e.preventDefault();
        //console.log("in handleInvite");
        document.getElementById("invite-form").reset();

        // axios: add new invitee to event invitees in DB
        const config = {
            method: "post",
            url: "http://localhost:3001/add-task",
            data: {
                curr_event,
                email,
                new_task
            },
        };
        axios(config)
        .then((result) => {
            var updated = result.data.updated_tasks;

            // update localstorage invitees
            localStorage.setItem("tasks",JSON.stringify(updated))

            // update state
            setInvitees(updated);
        })
        .catch((error) => {
            console.log(error);
        });


    }
    return(
        <div>
            <div className="all">
                <NavBar></NavBar>
                <div class="tasking">
                    <h3>To-Do List</h3>
                    <form id="task-form">
                        <input class="tas" type="text" name="name" placeholder="Add a Task" onChange={(e) => setNewInvitee(e.target.value)}></input>
                        <input class="task" type="button" name="invite" value="Add Task" onClick={handleInvite}></input>
                    </form>
                </div>
                <div class="taskss">
                    <h3 class="task-header"></h3>
                    <ul id="invitedList">
                        {html_tasks}
                    </ul>
                </div>
                <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            </div>
        </div>
    );
};

export default ToDo;