import './Nav.css'
import {NavLink} from "react-router-dom";
import {useAuth} from "../hooks/useAuth.jsx";
import {login, logout} from "../utils/auth.js";

export function Nav() {

    return <nav className="navbar navbar-light navbar-expand-md bg-body-tertiary " id="main-navbar">
        <div className="container-fluid">
            <a className="navbar-brand" href="/">
                <img className="logo" src="/FFSSAF-bord-blanc-fond-transparent.webp" alt="logo"/>
                FFSAF Intranet
            </a>

            <button className="navbar-toggler" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown"
                    aria-expanded="false" aria-label="Toggle navigation">
                <span className="navbar-toggler-icon"></span>
            </button>
            <div className="collapse navbar-collapse" id="navbarNavDropdown">
                <div className="collapse-item">
                    <ul className="navbar-nav">
                        <li className="nav-item"><NavLink className="nav-link" to="/">Accueil</NavLink></li>
                        <CompMenu/>
                        <ClubMenu/>
                        <AdminMenu/>
                        <AffiliationMenu/>
                        <LoginMenu/>
                    </ul>
                </div>
            </div>
        </div>
    </nav>
}


function AffiliationMenu() {
    const {is_authenticated} = useAuth()

    if (is_authenticated)
        return <></>
    return <li className="nav-item"><NavLink className="nav-link" to="/affiliation">Demande d'affiliation</NavLink></li>
}

function CompMenu() {
    const {is_authenticated} = useAuth()

    if (!is_authenticated)
        return <></>

    return <li className="nav-item dropdown">
        <div className="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Compétitions
        </div>
        <ul className="dropdown-menu">
            <li className="nav-item"><NavLink className="nav-link" to="/competition">Inscription</NavLink></li>
            <li className="nav-item"><NavLink className="nav-link" to="/result">Mes résultats</NavLink></li>
        </ul>
    </li>
}

function ClubMenu() {
    const {is_authenticated, userinfo} = useAuth()

    if (!is_authenticated || !(userinfo?.roles?.includes("club_president")
        || userinfo?.roles?.includes("club_secretaire") || userinfo?.roles?.includes("club_respo_intra")))
        return <></>

    return <li className="nav-item dropdown">
        <div className="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Club
        </div>
        <ul className="dropdown-menu">
            <li className="nav-item"><NavLink className="nav-link" to="/club/me">Mon club</NavLink></li>
            <li className="nav-item"><NavLink className="nav-link" to="/club/member">Membres</NavLink></li>
        </ul>
    </li>
}

function AdminMenu() {
    const {is_authenticated, userinfo} = useAuth()

    if (!is_authenticated || !userinfo?.roles?.includes("federation_admin"))
        return <></>

    return <li className="nav-item dropdown">
        <div className="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Administration
        </div>
        <ul className="dropdown-menu">
            <li className="nav-item"><NavLink className="nav-link" to="/admin/member">Membres</NavLink></li>
            <li className="nav-item"><NavLink className="nav-link" to="/admin/club">Club</NavLink></li>
            <li className="nav-item"><NavLink className="nav-link" to="/admin/stats">Statistiques</NavLink></li>
        </ul>
    </li>
}

function LoginMenu() {
    const {is_authenticated} = useAuth()

    return <>
        {!is_authenticated ?
            <li className="nav-item">
                <div className="nav-link" onClick={() => login()}>Connexion</div>
            </li>
            :
            <li className="nav-item dropdown">
                <div className="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                    Mon compte
                </div>
                <ul className="dropdown-menu">
                    <li className="nav-item"><NavLink className="nav-link" to="/me">Mon espace</NavLink></li>
                    <li className="nav-item">
                        <div className="nav-link" onClick={() => logout()}>Déconnexion</div>
                    </li>
                </ul>
            </li>
        }
    </>
}
