import { NavLink } from "react-router";
import { t } from "@/config/i18n";
import "./index.css";
import { Group, Loader } from "@mantine/core";
import { Config } from "@/config/config";
import { useAuth } from "@/services/auth/AuthProvider";
import { useMediaQuery } from "@mantine/hooks";
import { IconHome, IconLogin, IconLogout, IconSettings } from "@tabler/icons-react";

export function Navbar() {
    const { loggedUser: user, isLoading } = useAuth();
    const isPhone = useMediaQuery("(max-width: 760px");

    if (!user && isLoading) {
        return (
            <Group align="center" justify="center" h="80vh" w="100%">
                <Loader color="pink" />
            </Group>
        );
    }

    return (
        <nav>
            <Group>
                <NavLink className={"navLink"} aria-label={t("home")} to="/">
                    {isPhone ? <IconHome/> : t("home", { capfirst: true })}
                </NavLink>
                {user?.logged ? (
                    <NavLink className={"navLink"} aria-label={t("dashboard")} to="/dashboard/help">
                        {isPhone ? <IconSettings/> : t("dashboard", { capfirst: true })}
                    </NavLink>
                ) : null}
            </Group>
            {!user?.logged ? (
                <a
                    href={`${Config.backend_uri}/auth/login`}
                    className={"navLink"}
                    aria-label={t("login with keycloak", { capfirst: true })}
                >
                    {isPhone ? <IconLogin/> : t("login with keycloak", { capfirst: true })}
                </a>
            ) : (
                <a
                    href={`${Config.backend_uri}/auth/logout`}
                    className={"navLink"}
                    aria-label={t("logout", { capfirst: true })}
                >
                    {isPhone ? <IconLogout/> : t("logout", { capfirst: true })}
                </a>
            )}
        </nav>
    );
}