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

const GuestList = () => {
    var curr_event = window.localStorage.getItem("curr_event");
    var email = window.localStorage.getItem("email");
    var ls_invitees = JSON.parse(window.localStorage.getItem("invitees"));

    const [new_invitee, setNewInvitee] = useState("");
    const [invitees, setInvitees] = useState(ls_invitees)

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

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

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

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

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

        var invitee = e.target.value;

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

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

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

    var html_invitees = [];
    for (var i = 0; i < invitees.length; i++) {
        var checkbox = <div class="check"><label for={invitees[i]["name"]}><input class="checkboxx" type="checkbox" id={invitees[i]["name"]} 
                        onClick={handleCheckboxClick} value={invitees[i]["name"]}/>Attending</label></div>
        // check checkbox if invitee is attending
        if (invitees[i]["attending"] === true) {;
            checkbox = <div><label for={invitees[i]["name"]}><input type="checkbox" id={invitees[i]["name"]} onClick={handleCheckboxClick} defaultChecked = {true} value={invitees[i]["name"]}/>Attending</label></div>
        }
        html_invitees.push(<div><li class="invitee">{invitees[i]["name"]} <button class="dele" value={invitees[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-invitee",
            data: {
                curr_event,
                email,
                new_invitee
            },
        };
        axios(config)
        .then((result) => {
            var updated = result.data.updated_invitees;

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

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


    }
    return(
        <div>
            <div className="all">
                <NavBar></NavBar>
                <div class="inviting">
                    <h3>Guest List</h3>
                    <form id="invite-form">
                        <input class="inpu" type="text" name="name" placeholder="Invite Someone" onChange={(e) => setNewInvitee(e.target.value)}></input>
                        <input class="invite" type="button" name="invite" value="Invite" onClick={handleInvite}></input>
                    </form>
                </div>
                <div class="invitees">
                    <h3 class="invitees-header">Invitees</h3>
                    <ul id="invitedList">
                        {html_invitees}
                    </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/>
            </div>
        </div>
    );
};

export default GuestList;