import "./styles/Layout.css";
import "./styles/extra.css";
import React, { useEffect, 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 Login from "./pages/Login";
import { apiClient } from "./utils/httpClients";


export default function layout() {
    const navigate = useNavigate();
    const navigationContext = React.createContext(navigate);
    const [state, setState] = useState({
        user: null,
    });

    useEffect(async () => {
        await updateAuthStatus();
    });

    async function updateAuthStatus() {
        const getUserResponse = await apiClient.get("/user");
        if (getUserResponse !== 200) {
            setState({ user: null });
        } else {
            setState({ user: getUserResponse.data });
        }
    }

    let indentityDisplay = (
        <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 (state.user) {
        indentityDisplay = (
            <Nav>
                <li className="nav-item">
                    <NavLink className="nav-link" to="/" >Hi, {this.state.user.firstName}</NavLink>
                </li>
                <li className="nav-item">
                    <NavLink className="nav-link" to="/logout" >Logout</NavLink>
                </li>
            </Nav>
        );
    }

    return (
        <div id="app">
            <navigationContext.Provider value={navigate}>
                <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>
                                {indentityDisplay}
                            </NavbarCollapse>
                        </Container>
                    </Navbar>
                </header>
                <main>
                    <Routes>
                        <Route path="/" element={<Welcome />} />
                        <Route path="/dashboard" element={<Dashboard />} />
                        <Route path="/login" element={<Login />} />
                    </Routes>
                </main>
                <footer>

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