import { React, useState } from "react";
import Navbar from "../nav-bar/nav-bar";
import CountdownTimer from '../event-countdown/countdown-timer';
import { Link } from 'react-router-dom';
import "./event-elements.css";
import axios from "axios";
// import { ProSidebarProvider } from 'react-pro-sidebar';

const EventDashboard = () => {
    // reload state
    const [numReloads, setNumReloads] = useState(0);

    // TODO: Get countdown time stuff here
    var curr_event = window.localStorage.getItem("curr_event");
    var email = window.localStorage.getItem("email");
    console.log("curr selected event is", curr_event);

    const conf = {
        method: "post",
        url: "http://localhost:3001/get-attendees",
        data: {
            curr_event,
            email,
        },
    };

    const con2 = {
        method: "post",
        url: "http://localhost:3001/countdown-return",
        data: {
            curr_event,
            email,
        },
    };

    axios(con2)
        .then((result) => {
            window.localStorage.setItem('event_date', JSON.stringify(result.data.ret_countdown));
        })
        .catch((error) => {
            console.log(error);
        });
    const target_date = new Date(JSON.parse(window.localStorage.getItem("event_date")));
    const target_in_ms = target_date.getTime();
    const dateTimeAfterThreeDays = target_in_ms;

    // set tasks in local storage
    const con3 = {
        method: "post",
        url: "http://localhost:3001/get-tasks",
        data: {
            curr_event,
            email,
        },
    };

    axios(con3)
        .then((result) => {
            window.localStorage.setItem('tasks', JSON.stringify(result.data.tasks));
        })
        .catch((error) => {
            console.log(error);
        });

    // set tasks_done in local storage
    const con4 = {
        method: "post",
        url: "http://localhost:3001/get-tasks-done",
        data: {
            curr_event,
            email,
        },
    };

    axios(con4)
        .then((result) => {
            window.localStorage.setItem('tasks_done', JSON.stringify(result.data.tasks_done));
            console.log("inn here");
        })
        .catch((error) => {
            console.log(error);
        });

    if (window.localStorage.tasks_done === null) {
        window.localStorage.setItem('tasks_done', JSON.stringify(''));
    }
    console.log("tasks_done: ", window.localStorage.tasks_done);


    // set invitees in local storage
    const con = {
        method: "post",
        url: "http://localhost:3001/get-invitees",
        data: {
            curr_event,
            email,
        },
    };

    axios(con)
        .then((result) => {
            window.localStorage.setItem('invitees', JSON.stringify(result.data.invitees));
        })
        .catch((error) => {
            console.log(error);
        });

    const conf34 = {
        method: "post",
        url: "http://localhost:3001/get-attendees",
        data: {
            curr_event,
            email,
        },
    };

    axios(conf34)
        .then((result) => {
            window.localStorage.setItem('attendees', JSON.stringify(result.data.attendees));
        })
        .catch((error) => {
            console.log(error);
        });

    // set spent_desc in local storage
    const conf4 = {
        method: "post",
        url: "http://localhost:3001/get-spent-desc",
        data: {
            curr_event,
            email,
        },
    };

    axios(conf4)
        .then((result) => {
            window.localStorage.setItem('spent_desc', JSON.stringify(result.data.event_spent_desc));
        })
        .catch((error) => {
            console.log(error);
        });

    // set event_spent variable in local storage
    const config = {
        method: "post",
        url: "http://localhost:3001/get-event-spent",
        data: {
            curr_event,
            email
        },
    };

    axios(config)
        .then((result) => {
            window.localStorage.setItem("curr_event_spent", parseInt(result.data.event_spent));
        })
        .catch((error) => {
            console.log(error);
        });

    // set budget variable in local storage
    const configuration = {
        method: "post",
        url: "http://localhost:3001/get-event-budget",
        data: {
            curr_event,
            email
        },
    };

    axios(configuration)
        .then((result) => {
            window.localStorage.setItem("curr_event_budget", result.data.budget);
        })
        .catch((error) => {
            console.log(error);
        });

    console.log(curr_event);
    console.log(email);

    const fav_venue_config = {
        method: "post",
        url: "http://localhost:3001/get-favorite",
        data: {
            curr_event,
            email
        },
    };
    axios(fav_venue_config)
        .then((result) => {
            window.localStorage.setItem("fav_venues", JSON.stringify(result.data.fav_venues));
        })
        .catch((error) => {
            console.log(error);
        });

    var venue_array = window.localStorage.getItem("fav_venues");
    venue_array = JSON.parse(venue_array);
    console.log(venue_array.length);


    if (venue_array.length !== 0) {
        var venue_list_items = venue_array.map((venue) =>
            <li>{venue.name}</li>
        );
    } else {
        venue_list_items = <li>No Favorties Yet</li>;
    }
    console.log("venue array " + venue_array);

    return (
        <div>
            <Navbar />
            <br />
            <div><h2 class="event-name">{curr_event}</h2></div>
            <CountdownTimer targetDate={dateTimeAfterThreeDays} />
            <br />
            <div class="grid-container">
                <Link to={`/budget-tracker`}>
                    <div class="budget">
                        <div class="content">
                            <p class="section-name">Budget Tracker</p>
                            <br />
                            <p>Balance: ${window.localStorage.getItem("curr_event_budget") - parseInt(window.localStorage.getItem("curr_event_spent"))}</p>
                            <br />
                            <p>Budget: ${window.localStorage.getItem("curr_event_budget")}</p>
                            <br />
                            <p>Spent: ${parseInt(window.localStorage.getItem("curr_event_spent"))}</p>
                        </div>
                    </div>
                </Link>
                <Link to={`/guest-list`}>
                    <div class="guest-list">
                        <p class="section-name">Guest List</p>
                        <div class="content">
                            <p>Guests Invited: {JSON.parse(window.localStorage.getItem("invitees")).length}</p>
                            <br />
                            <p>Guests Attending: {window.localStorage.getItem("attendees")}</p>
                            <br />
                            <p>Responses needed: {JSON.parse(window.localStorage.getItem("invitees")).length - parseInt(window.localStorage.getItem("attendees"))}</p>
                        </div>
                    </div>
                </Link>
                <Link to={`/to-do`}>
                    <div class="to-do">
                        <p class="section-name">To-Do List</p>
                        <div class="content">
                            <p>Total Tasks: {(JSON.parse(window.localStorage.getItem("tasks"))).length}</p>
                            <br />
                            <p>Tasks Left To-Do: {(JSON.parse(window.localStorage.getItem("tasks"))).length - (JSON.parse(window.localStorage.getItem("tasks_done"))).length}</p>
                        </div>
                    </div>
                </Link>
                <Link to={`/favorite-venues`}>
                    <div class="venue">
                        <p class="section-name">Favorite Venues</p>
                        <div class="content">
                            <ul class="list">{venue_list_items}</ul>
                        </div>
                    </div>
                </Link>
            </div>
        </div>
    );
};

export default EventDashboard;