import { useAuth } from "@web/src/providers/auth-provider";
import { Menu } from "antd";
import { useMemo } from "react";
import { useNavigate, useLocation } from "react-router-dom";

export const NavigationMenu = () => {
	const navigate = useNavigate();
	const { isAuthenticated } = useAuth();
	const { pathname } = useLocation();

	const menuItems = useMemo(() => {
		const baseItems = [
			{ key: "home", path: "/", label: "首页" },
			{ key: "courses", path: "/courses", label: "全部课程" },
			{ key: "paths", path: "/paths", label: "学习路径" },
		];
		if (!isAuthenticated) {
			return baseItems;
		} else {
			return [
				...baseItems,
				{ key: "my-duty", path: "/my-duty", label: "我创建的" },
				{ key: "my-learning", path: "/my-learning", label: "我学习的" },
			];
		}
	}, [isAuthenticated]);

	const selectedKey =
		menuItems.find((item) => item.path === pathname)?.key || "";
	return (
		<Menu
			mode="horizontal"
			className="border-none font-medium"
			selectedKeys={[selectedKey]}
			onClick={({ key }) => {
				const selectedItem = menuItems.find((item) => item.key === key);
				if (selectedItem) navigate(selectedItem.path);
				window.scrollTo({
					top: 0,
					behavior: "smooth",
				});
			}}>
			{menuItems.map(({ key, label }) => (
				<Menu.Item
					key={key}
					className="text-gray-600 hover:text-blue-600">
					{label}
				</Menu.Item>
			))}
		</Menu>
	);
};