import React from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { skipToken } from "@tanstack/react-query";
import { useTranslations } from "next-intl";
import { SidebarMenuSubButton } from "@/components/ui/sidebar";
import { NavSubitem } from "@/components/layout/dashboard/types/nav-item";
import { api } from "@/lib/trpc/client";

type NavMenuSubitemProps = {
    data: NavSubitem;
};

export const NavMenuSubitem: React.FC<NavMenuSubitemProps> = (props) => {
    const {
        data: {
            icon: Icon,
            url,
            permission,
            title
        }
    } = props;

    const t = useTranslations();
    const pathname = usePathname();

    const {
        data,
        isEnabled
    } = api.gate.can.useQuery(permission ? {
        resource: permission[0],
        action: permission[1]
    } : skipToken, {
        enabled: !!permission
    });

    if(isEnabled && !data) {
        return null;
    }

    return (
        <SidebarMenuSubButton
          asChild
          isActive={url === pathname}>
            <Link href={url}>
                {Icon && <Icon className="size-4" />}
                {t(`dashboard.general.menu.${title}` as any)}
            </Link>
        </SidebarMenuSubButton>
    );
};