import { api } from "@nice/client";
import { TaxonomySlug } from "@nice/common";
import React, { useMemo } from "react";
import { MailOutlined, SendOutlined } from "@ant-design/icons";
import {
	FileTextOutlined,
	ScheduleOutlined,
	QuestionCircleOutlined,
	FolderOutlined,
	TagsOutlined,
} from "@ant-design/icons";
import { useAuth } from "@web/src/providers/auth-provider";

export interface NavItem {
	to: string;
	label: string;
	icon?: React.ReactNode;
}

export function useNavItem() {
	const { user } = useAuth();
	const { data } = api.term.findMany.useQuery({
		where: {
			taxonomy: { slug: TaxonomySlug.CATEGORY },
		},
	});

	const navItems = useMemo(() => {
		// 定义固定的导航项
		const staticItems = {
			inbox: {
				to: user ? "/" : "/inbox",
				label: "我收到的",
				icon: <MailOutlined className="text-base" />,
			},
			outbox: {
				to: "/outbox",
				label: "我发出的",
				icon: <SendOutlined className="text-base" />,
			},
			letterList: {
				to: !user ? "/" : "/letter-list",
				label: "公开信件",
				icon: <FileTextOutlined className="text-base" />,
			},
			letterProgress: {
				to: "/letter-progress",
				label: "进度查询",
				icon: <ScheduleOutlined className="text-base" />,
			},
			// help: {
			//     to: "/help",
			//     label: "使用帮助",
			//     icon: <QuestionCircleOutlined className="text-base" />
			// }
		};

		if (!data) {
			return [
				user && staticItems.inbox,
				user && staticItems.outbox,
				staticItems.letterList,
				staticItems.letterProgress,
				// staticItems.help,
			].filter(Boolean);
		}

		// 构建分类导航项
		const categoryItems = data.map((term) => ({
			to: `/write-letter?termId=${term.id}`,
			label: term.name,
			icon: <TagsOutlined className="text-base"></TagsOutlined>,
		}));

		// 按照指定顺序返回导航项
		return [
			user && staticItems.inbox,
			user && staticItems.outbox,
			staticItems.letterList,
			staticItems.letterProgress,
			...categoryItems,
			// staticItems.help,
		].filter(Boolean);
	}, [data, user]);

	return { navItems };
}
