import React from "react";
import axios from "axios";
import { Form, Button } from "react-bootstrap";
import { useState } from 'react';
import './event-creation.css';
import Cookies from "universal-cookie";
import NavBar from '../nav-bar/nav-bar';
const cookies = new Cookies();

export default function EventCreation() {
    // initial state
    const [event_name, setEventName] = useState("");
    const [event_date, setEventDate] = useState("");
    const [event_budget, setEventBudget] = useState("");
    const owner_email = cookies.get("TOKEN_AND_EMAIL")[1];

    let handleSubmit = async (e) => {
        e.preventDefault();

        // set configurations
        console.log("in handle submit for event creation");
        console.log(event_name);
        console.log(owner_email);
        const configuration = {
            method: "post",
            url: "http://localhost:3001/event-creation",
            data: {
                event_name,
                event_date,
                event_budget,
                owner_email,
            },
        };

        console.log("frontend event creation, email:", owner_email);

        // make the API call
        axios(configuration)
            .then((result) => {
                window.localStorage.setItem("curr_event", event_name);
                var new_event = { event_name: event_name };

            // no other events, user making first one
            if (window.localStorage.getItem("events") === "no events") {
                window.localStorage.setItem("events", JSON.stringify([new_event]));
            }
            // has other events, user adding another event
            else {
                var events = JSON.parse(window.localStorage.getItem("events"));
                events.push(new_event);
                window.localStorage.setItem("events", JSON.stringify(events));
            }
            window.localStorage.setItem('event_date', JSON.stringify(event_date));
            window.localStorage.setItem('invitees', JSON.stringify([]));
            window.localStorage.setItem('spent_desc', JSON.stringify([]));
            window.localStorage.setItem("curr_event_spent", parseInt(0))
            window.localStorage.setItem("curr_event_budget", event_budget)
            window.localStorage.setItem("attendees", 0)
            window.location.href = "./event-dashboard";
        })
        .catch((error) => {
            error = new Error();
        });
    };

    return (
        <div className="code">
            {window.localStorage.getItem("events") !== "no events" ? (
                <NavBar></NavBar>
            ) : (<div></div>)}
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
                <path fill="#58896E" fill-opacity="1" d="M0,256L48,224C96,192,192,128,288,106.7C384,85,480,107,576,96C672,85,768,43,864,69.3C960,96,1056,192,1152,218.7C1248,245,1344,203,1392,181.3L1440,160L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path>
            </svg>
            <div class="logout">
                <a href="../log-out" class="logout-text">Log out</a>
            </div>
            <div className="title">Create a new event</div>
            <div className="event-creation-form">
                <Form onSubmit={handleSubmit}>
                    <input
                        type="text"
                        value={event_name}
                        placeholder="Event Name (Required)"
                        onChange={(e) => setEventName(e.target.value)}
                    />
                    <br />
                    <input
                        type="text"
                        value={event_budget}
                        placeholder="Event Budget (Required) "
                        onChange={(e) => setEventBudget(e.target.value)}
                    />
                    <br />
                    <input
                        type="text"
                        value={event_date}
                        placeholder="Event Date (Required)"
                        onChange={(e) => setEventDate(e.target.value)}
                    />
                    <br />
                    <Button type="submit">Create</Button>
                </Form>
            </div>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
                <path fill="#EAEFEB" fill-opacity="1" d="M0,192L60,197.3C120,203,240,213,360,192C480,171,600,117,720,128C840,139,960,213,1080,202.7C1200,192,1320,96,1380,48L1440,0L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path>
            </svg>
        </div>
    );
};