import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';
import {useState} from 'react';
import CountdownTimer from '../event-countdown/countdown-timer';
import axios from "axios";
import "./nav-bar.css"

function NavBar() {
  var events = JSON.parse(window.localStorage.getItem("events"));

  function updateCurrEvent(e) {
    window.localStorage.setItem("curr_event",e.target.innerHTML);
    var curr_event = window.localStorage.getItem("curr_event");
    var email = window.localStorage.getItem("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);
    });
    
    // 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 conf = {
        method: "post",
        url: "http://localhost:3001/get-spent-desc",
        data: {
            curr_event,
            email,
        },
    };

    axios(conf)
    .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)
        window.location.href = "./event-dashboard";
    })
    .catch((error) => {
        console.log(error);
    });
  }

  var dropdown_menu = [];
  for (var i = 0; i < events.length; i++) {
    dropdown_menu.push(<NavDropdown.Item onClick={(e) => {updateCurrEvent(e)}}>{events[i]["event_name"]}</NavDropdown.Item>)
  }

  return (
    <div class="nav">
      <Navbar expand="lg">
        <Container className="cont">
          <NavDropdown title="Events" id="basic-nav-dropdown">
            {dropdown_menu}
          </NavDropdown>
          <Navbar.Toggle aria-controls="basic-navbar-nav" />
          <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="mr-auto">
              <Nav.Link href="../event-dashboard">Dashboard</Nav.Link>
              <Nav.Link href="../venue-search">Venue Search</Nav.Link>
              <Nav.Link href="../to-do">To-Do List</Nav.Link>
              <Nav.Link href="../guest-list">Guest List</Nav.Link>
              <Nav.Link href="../budget-tracker">Budget Tracker</Nav.Link>
              <div class="right">
                <a class="right-elements" href="../event-creation">Create New Event</a>
                <a class="right-elements" href="../log-out">Log Out</a>
              </div>
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>
    </div>
  );
}

export default NavBar;