import "./styles/Layout.css";
import "./styles/extra.css";
import { useState } from "react";
import { NavLink, Route, Routes, useNavigate } from "react-router-dom";
import Welcome from "./pages/Welcome";
import Navbar from "react-bootstrap/Navbar";
import { Container, Nav, NavbarBrand } from "react-bootstrap";
import NavbarToggle from "react-bootstrap/esm/NavbarToggle";
import NavbarCollapse from "react-bootstrap/esm/NavbarCollapse";
import Dashboard from "./pages/Dashboard";
import Logout from "./pages/Logout";
import Admin from "./pages/NewAdmin";
import Login from "./pages/Login";
import Context from "./globals.js";


export default function layout() {
    const [globals, setGlobals] = useState({
        user: null,
        update: (updates, onUpdate) => setGlobals((state) => { return { ...state, ...updates }; }, onUpdate),
        navigate: useNavigate()
    });

    let identityDisplay = (
        <Nav>
            <li className="nav-item">
                <NavLink className="nav-link" to="/login" >Login</NavLink>
            </li>
            <li className="nav-item">
                <NavLink className="nav-link" to="/signup" >Sign up!</NavLink>
            </li>
        </Nav>
    );

    if (globals.user) {
        identityDisplay = (
            <Nav>
                <li className="nav-item">
                    <NavLink className="nav-link" to="/" >Hi, {globals.user.firstName}</NavLink>
                </li>
                <li className="nav-item">
                    <NavLink className="nav-link" to="/logout" >Logout</NavLink>
                </li>
            </Nav>
        );
    }

    return (
        <div id="app">
            <Context.Provider value={globals}>
                <header>
                    <Navbar bg="light" expand="md">
                        <Container>
                            <NavbarBrand href="/">Sports Matcher</NavbarBrand>
                            <NavbarToggle aria-controls="navigation"></NavbarToggle>
                            <NavbarCollapse id="main-nav">
                                <Nav className="me-auto">
                                    <li className="nav-item">
                                        <NavLink className="nav-link" to="/" >Home</NavLink>
                                    </li>
                                </Nav>
                                {identityDisplay}
                            </NavbarCollapse>
                        </Container>
                    </Navbar>
                </header>
                <main>
                    <Routes>
                        <Route path="/" element={<Welcome />} />
                        <Route path="/dashboard" element={<Dashboard />} />
                        <Route path="/login" element={<Login />} />
                        <Route path="/logout" element={<Logout />} />
                        <Route path="/admin" element={<Admin />} />
                    </Routes>
                </main>
                <footer>

                </footer>
            </Context.Provider>
        </div>
    );
}