import React, { PropsWithChildren, Children } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { skipToken } from "@tanstack/react-query";
import { useTranslations } from "next-intl";
import { NavItem } from "@/components/layout/dashboard/types/nav-item";
import { IconChevronRight } from "@tabler/icons-react";
import { api } from "@/lib/trpc/client";
import {
    SidebarMenuItem,
    SidebarMenuButton,
    SidebarMenuSub
} from "@/components/ui/sidebar";
import {
    Collapsible,
    CollapsibleContent,
    CollapsibleTrigger,
} from "@/components/ui/collapsible";
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

type NavMenuItemProps = PropsWithChildren<{
    mobile?: boolean;
    collapsed?: boolean;
    data: NavItem;
}>;

export const NavMenuItem: React.FC<NavMenuItemProps> = (props) => {
    const {
        mobile: isMobile,
        collapsed: isCollapsed,
        data: {
            permission,
            defaultOpen,
            icon: Icon,
            shortcut,
            title,
            url
        },
        children
    } = props;

    const pathname = usePathname();
    const t = useTranslations();
    const hasChildren = Children.count(children) > 0;
    const translatedTitle = t(`dashboard.general.menu.${title}` as any);

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

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

    if(hasChildren) {
        if(isCollapsed && !isMobile) {
            return (
                <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                        <SidebarMenuItem>
                            <SidebarMenuButton
                              asChild
                              tooltip={translatedTitle}
                              isActive={url === pathname}>
                                <Link href={url}>
                                    {Icon && <Icon />}
                                    <span>{translatedTitle}</span>
                                </Link>
                            </SidebarMenuButton>
                        </SidebarMenuItem>
                    </DropdownMenuTrigger>

                    <DropdownMenuContent side="right" align="start" sideOffset={8}>
                        <SidebarMenuSub>
                            {children}
                        </SidebarMenuSub>
                    </DropdownMenuContent>
                </DropdownMenu>
            )
        }

        return (
            <Collapsible>
                <CollapsibleTrigger asChild>
                    <SidebarMenuItem>
                        <SidebarMenuButton
                          tooltip={translatedTitle}
                          isActive={pathname.startsWith(url || "#")}>
                            {Icon && <Icon />}
                            <span>{translatedTitle}</span>
                            <IconChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
                        </SidebarMenuButton>
                    </SidebarMenuItem>
                </CollapsibleTrigger>

                <CollapsibleContent>
                    <SidebarMenuSub>
                        {children}
                    </SidebarMenuSub>
                </CollapsibleContent>
            </Collapsible>
        );
    }

    return (
        <SidebarMenuItem>
            <SidebarMenuButton
              asChild
              tooltip={translatedTitle}
              isActive={url === pathname}>
                <Link href={url}>
                    {Icon && <Icon />}
                    <span>{translatedTitle}</span>
                </Link>
            </SidebarMenuButton>
        </SidebarMenuItem>
    );
};