import React, { useEffect, useState } from "react";
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import Button from 'react-bootstrap/Button';
import { Link } from "react-router-dom";
import Dropdown from "react-bootstrap/Dropdown";
import { useCookies } from "react-cookie";
import CartButton from "./CartButton";

const Topbar = () => {
    const [cookies, setCookie, removeCookie] = useCookies(['name']);
    const [user, setLogin] = useState(null);

    

    useEffect(() => {
        async function reset() {
            await setLogin(await cookies.GMGM ?? null);
        }
        reset();
    });

    async function logOut() {
        const response = fetch(`https://localhost:7292/api/Logout`, {
            method: 'POST',
            credentials: 'include'
        })
        await removeCookie("GMGM");
        await setLogin(null); // Y U NO WORK?!?
    }

    return (
        <>
            <Navbar expand="sm" className="topbar-container">
                <Container>
                    <Link className="navbar-brand" to="/">
                        <img src="/images/LesGrossesMitaines.png" alt="" height="45" />
                    </Link>
                    <Navbar.Toggle aria-controls="basic-navbar-nav" />
                    <Navbar.Collapse id="basic-navbar-nav">
                        <Nav className="me-auto">
                            <Link className="nav-link" to="/" >
                                Maison
                            </Link>
                            <Link className="nav-link" to="/morceaux" >
                                Morceaux
                            </Link>
                            <Link className="nav-link" to="/aboutUs" >
                                À propos de nous
                            </Link>
                            <Link className="nav-link" to="/contactUs" >
                                Contactez-nous
                            </Link>
                            <Link className="nav-link" to="/privacy" >
                                Vie privée
                            </Link>
                            {(user === null || user.LoggedIn === false) &&
                                <Link className="nav-link" to="/login" >
                                    <b>Connexion</b>
                                </Link>
                            }
                            {(user === null || user.LoggedIn === false) &&
                                <Link className="nav-link" to="/register">
                                    S'inscrire
                                </Link>
                            }
                            {user !== null && user.LoggedIn &&
                                <Dropdown className="dropdown-gestion-container">
                                    <Dropdown.Toggle className="dropdown-gestion" >
                                        Bonjour, {user.firstName} {user.lastName}!
                                    </Dropdown.Toggle>
                                    <Dropdown.Menu className="dropdown-gestion-menu">
                                        <Dropdown.Item>
                                            <Link className="nav-link" to="/myaccount" >
                                                Mon Compte
                                            </Link>
                                        </Dropdown.Item>
                                        <Dropdown.Item>
                                            <Link className="nav-link" to="/myaddresses" >
                                                Mes Addresses
                                            </Link>
                                        </Dropdown.Item>
                                        <Dropdown.Item>
                                            <Link className="nav-link" to="/myinvoices" >
                                                Mes Commandes
                                            </Link>
                                        </Dropdown.Item>
                                        <Dropdown.Item>
                                            <Link className="nav-link" to="/logout">
                                                <b>Déconnexion</b>
                                            </Link>
                                        </Dropdown.Item>
                                        {user.role === "Administrateur" &&
                                            <Container>
                                                <Dropdown.Divider />
                                                <Dropdown.ItemText>
                                                    Gestion
                                                </Dropdown.ItemText>
                                                <Dropdown.Item>
                                                    <Link className="nav-link" to="/inventaire" >
                                                        Inventaire
                                                    </Link>
                                                </Dropdown.Item>
                                                <Dropdown.Item>
                                                    <Link className="nav-link" to="/invoices" >
                                                        Commandes
                                                    </Link>
                                                </Dropdown.Item>
                                                <Dropdown.Item>
                                                    <Link className="nav-link" to="/clients" >
                                                        Clients
                                                    </Link>
                                                </Dropdown.Item>
                                                <Dropdown.Item>
                                                    <Link className="nav-link" to="/addresses" >
                                                        Adresses
                                                    </Link>
                                                </Dropdown.Item>
                                            </Container>
                                        }
                                    </Dropdown.Menu>
                                </Dropdown>
                            }
                        </Nav>
                        <CartButton/>
                    </Navbar.Collapse>
                </Container>
            </Navbar>
        </>
    );
}

export default Topbar;