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";

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

    function logOut() {
        const response = fetch(`https://localhost:7292/api/Logout`, {
            method: 'POST',
            credentials: 'include'
    })  

    removeCookie("GMGM");
    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" >
                            Connexion
                        </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>
                                <Button className="nav-link" onClick={() => logOut()}>
                                    Déconnexion
                                </Button>
                            </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>
                </Navbar.Collapse>
            </Container>
        </Navbar>
    );
}

export default Topbar;