import axios from "axios";
import Link from "next/link";
import {useRouter} from "next/router";
import {Button} from "primereact/button";
import {Menubar} from "primereact/menubar";
import {MenuItem} from "primereact/menuitem";

interface Props {
	profilePicture: string;
	timer?: number;
	showExamEnd?: boolean;
}

/* eslint-disable @next/next/no-img-element */
export default function Navbar({profilePicture, timer, showExamEnd = false}: Props) {
	const router = useRouter();

	const logout = async () => {
		axios.post("/api/logout").finally(() => {
			router.push("/login");
		});
	};

	const items: MenuItem[] = [
		{
			label: "Home",
			icon: "pi pi-fw pi-home",
			url: "/",
		},
		{
			label: "Account",
			icon: "pi pi-fw pi-user",
			url: "/profile",
		},
		{
			label: "Exam",
			icon: "pi pi-fw pi-plus-circle",
			url: "/exam",
		},
		{
			label: "Users",
			icon: "pi pi-fw pi-users",
			items: [
				{label: "List", icon: "pi pi-fw pi-users", url: "/users"},
				{label: "Stats", icon: "pi pi-fw pi-chart-pie", url: "/stats"},
				{label: "History", icon: "pi pi-fw pi-history", url: "/history"},
			],
		},
		{
			label: "Logout",
			icon: "pi pi-fw pi-power-off",
			command: logout,
		},
	];

	const endTimer = timer && (
		<span className="pr-2 font-semibold">
			{Math.floor(timer / 60) < 10 ? "0" : ""}
			{Math.floor(timer / 60)}:{timer % 60 < 10 ? "0" : ""}
			{timer % 60}
		</span>
	);

	const endNewExam = (
		<Link href="/exam" className="pr-2">
			<Button text label="Exam" severity="secondary" size="small" />
		</Link>
	);

	return (
		<div className="bg-neutral-100 z-10 w-full p-2">
			<Menubar model={items} end={showExamEnd ? endNewExam : endTimer} />
		</div>
	);
}