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

export function Nav() {
    const {t} = useTranslation();

    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"/>
                {t("nav.title")}
            </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="/">{t("nav.home")}</NavLink></li>
                        <CompMenu/>
                        <ClubMenu/>
                        <AdminMenu/>
                        <AffiliationMenu/>
                        <LoginMenu/>
                    </ul>
                </div>
            </div>
        </div>
    </nav>
}


function AffiliationMenu() {
    const {is_authenticated} = useAuth()
    const {t} = useTranslation();

    if (is_authenticated)
        return <></>
    return <li className="nav-item"><NavLink className="nav-link" to="/affiliation">{t("nav.aff_request")}</NavLink></li>
}

function CompMenu() {
    const {is_authenticated} = useAuth()
    const {t} = useTranslation();

    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">
            {t("competition", {count: 2})}
        </div>
        <ul className="dropdown-menu">
            <li className="nav-item"><NavLink className="nav-link" to="/competition">{t("registration", {count: 1})}</NavLink></li>
            <li className="nav-item"><NavLink className="nav-link" to="/result">{t("nav.competitions.results")}</NavLink></li>
            <li className="nav-item"><NavLink className="nav-link" to="/competition-manager">{t("comp_manage")}</NavLink></li>
        </ul>
    </li>
}

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

    if (!is_authenticated || !(isClubAdmin(userinfo)))
        return <></>

    return <li className="nav-item dropdown">
        <div className="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            {t("club", {count: 1})}
        </div>
        <ul className="dropdown-menu">
            <li className="nav-item"><NavLink className="nav-link" to="/club/me">{t("nav.club.my")}</NavLink></li>
            <li className="nav-item"><NavLink className="nav-link" to="/club/member">{t("member", {count: 2})}</NavLink></li>
        </ul>
    </li>
}

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

    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">
            {t("admin")}
        </div>
        <ul className="dropdown-menu">
            <li className="nav-item"><NavLink className="nav-link" to="/admin/member">{t("member", {count: 2})}</NavLink></li>
            <li className="nav-item"><NavLink className="nav-link" to="/admin/club">{t("club", {count: 2})}</NavLink></li>
            <li className="nav-item"><NavLink className="nav-link" to="/admin/stats">{t("stats")}</NavLink></li>
        </ul>
    </li>
}

function LoginMenu() {
    const {is_authenticated} = useAuth()
    const {t} = useTranslation();

    return <>
        {!is_authenticated ?
            <li className="nav-item">
                <div className="nav-link" onClick={() => login()}>{t("nav.login")}</div>
            </li>
            :
            <li className="nav-item dropdown">
                <div className="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                    {t("nav.account")}
                </div>
                <ul className="dropdown-menu">
                    <li className="nav-item"><NavLink className="nav-link" to="/me">{t("nav.space")}</NavLink></li>
                    <li className="nav-item">
                        <div className="nav-link" onClick={() => logout()}>{t("nav.logout")}</div>
                    </li>
                </ul>
            </li>
        }
    </>
}
