import { api } from "@nice/client";
import { TaxonomySlug } from "@nice/common";
import { useMemo } from "react";
import {
    FileTextOutlined,
    ScheduleOutlined,
    QuestionCircleOutlined,
    FolderOutlined,
    TagsOutlined
} from "@ant-design/icons";

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

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

    const navItems = useMemo(() => {
        // 定义固定的导航项
        const staticItems = {
            letterList: {
                to: "/",
                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 [staticItems.letterList, staticItems.letterProgress, staticItems.help];
        }

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

        // 按照指定顺序返回导航项
        return [
            staticItems.letterList,
            staticItems.letterProgress,
            ...categoryItems,
            staticItems.help
        ];
    }, [data]);

    return { navItems };
}