import { Link, usePathname, useRouter } from "@/i18n/navigation";
import { useTranslations } from 'next-intl';
import { useQueryClient } from "@tanstack/react-query";

import {
    SidebarGroup,
    SidebarMenu,
    SidebarMenuItem,
    SidebarMenuButton,
} from '@/components/ui/sidebar';

import {
    BanknoteArrowUp,
    BookmarkCheckIcon,
    BookOpenCheck,
    GiftIcon,
    MonitorSmartphoneIcon,
    Map,
    Package2,
    ScrollText,
    Tv2Icon,
    TvMinimalPlay,
    UserStarIcon,
    Headphones,
    Gamepad2,
} from 'lucide-react';
import { cn } from "@/lib/cn";

export function Navigations() {
    const t = useTranslations();
    const pathname = usePathname();
    const router = useRouter();
    const queryClient = useQueryClient();

    const config = [
        {
            title: t('routes.dashboard'),
            icon: Tv2Icon,
            url: "/dashboard",
            includes: "dd"
        },
        {
            title: t('routes.programs'),
            icon: TvMinimalPlay,
            url: "/dashboard/programs",
            includes: "programs"
        },
        {
            title: t('routes.packages'),
            icon: Package2,
            url: "/dashboard/packages",
            includes: "packages"
        },
        // {
        //     title: t('routes.games'),
        //     icon: Gamepad2,
        //     url: "/dashboard/games",
        //     includes: "games"
        // },
        // {
        //     title: t('routes.quizes'),
        //     icon: BookOpenCheck,
        //     url: "/dashboard/quizes",
        //     includes: "quizes"
        // },
        {
            title: t('routes.learning_paths'),
            icon: Map,
            url: "/dashboard/learning-paths",
            includes: "learning-paths"
        },
        {
            title: t('routes.certificates'),
            icon: BookmarkCheckIcon,
            url: "/dashboard/certificates",
            includes: "certificates"
        },
        {
            title: t('routes.purchases'),
            icon: ScrollText,
            url: "/dashboard/purchases",
            includes: "purchases"
        },
        // {
        //     title: t('routes.deposits'),
        //     icon: BanknoteArrowUp,
        //     url: "/dashboard/deposits",
        //     includes: "deposits"
        // },
        {
            title: t('routes.rewards'),
            icon: GiftIcon,
            url: "/dashboard/rewards",
            includes: "rewards"
        },
        // {
        //     title: t('routes.devices'),
        //     icon: MonitorSmartphoneIcon,
        //     url: "/dashboard/devices",
        //     includes: "devices"
        // },
        {
            title: t('routes.referrals'),
            icon: UserStarIcon,
            url: "/dashboard/referrals",
            includes: "referrals"
        },
        {
            title: t('routes.support'),
            icon: Headphones,
            url: "/dashboard/support",
            includes: "support"
        },
    ];

    return (
        <SidebarGroup className='mt-0 pt-0'>
            <SidebarMenu>
                {config.map((item, i) => {
                    const Icon = item.icon;
                    return (
                        <SidebarMenuItem key={i}>
                            <SidebarMenuButton tooltip={item.title} asChild>
                                <Link
                                    href={item?.url}
                                    onClick={() => {
                                        queryClient.invalidateQueries();
                                        router.refresh();
                                    }}
                                    prefetch={true}
                                    className={cn("data-[status=active]:bg-primary/35 flex items-center gap-2 hover:!bg-purple-500 hover:!text-white transition-all",
                                        (pathname.includes(item.includes) || pathname === item.url) && "!bg-purple-500 text-white"
                                    )}>
                                    <Icon />
                                    <span className="capitalize">{item.title}</span>
                                </Link>
                            </SidebarMenuButton>
                        </SidebarMenuItem>
                    )
                }
                )}
            </SidebarMenu>
        </SidebarGroup>
    );
};