import { Stack, Typography } from "@mui/material";
import { FC } from "react";
import { useTranslation } from "react-i18next";
import { Link, useLocation } from "react-router-dom";

import { useIdentityStore } from "../../Login/lib/identity.store";

interface Props {
	isVertical: boolean;
	onChanged: () => void;
}

export const NavigationMenu: FC<Props> = ({ isVertical, onChanged }) => {
	const location = useLocation();
	const { t } = useTranslation();
	const { user } = useIdentityStore();

	const allPages = [];

	const watcherPages = [
		{
			path: "/app/watcher/objects",
			title: t("Objects"),
		},
		{
			path: "/app/watcher/reports",
			title: t("Reports"),
		},
		{
			path: "/app/watcher/analytics",
			title: t("Analytics"),
		},
	];

	const managerPages = [
		{
			path: "/app/manager/organizations",
			title: t("Organizations"),
		},
	];

	const adminPages = [
		{
			path: "/app/admin/users",
			title: t("Users"),
		},
		{
			path: "/app/admin/organizations",
			title: t("Organizations"),
		},
	];

	if (user?.role === "Administrator") {
		allPages.push(...adminPages);
	} else if (user?.role === "Manager") {
		allPages.push(...managerPages);
	} else if (user?.role === "Watcher") {
		allPages.push(...watcherPages);
	}

	const currentPage = allPages.find(
		(page) => page.path === location.pathname,
	);

	return (
		<Stack
			direction={isVertical ? "column" : "row"}
			spacing={3}
			alignItems="center"
		>
			{allPages.map((x) => (
				<Link
					to={x.path}
					key={x.path}
					className={`${
						x === currentPage ? "active" : "inactive"
					} text-decoration-none`}
					onClick={onChanged}
				>
					<Typography
						variant="h6"
						sx={{
							fontSize: "20px",
							color:
								x === currentPage
									? "var(--primary-600)"
									: "var(--black-600)",
							fontWeight: x === currentPage ? 600 : 300,
						}}
					>
						{x.title}
					</Typography>
				</Link>
			))}
		</Stack>
	);
};
