"use client"

import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
import { Sidebar, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "@/components/ui/sidebar"
import { ChevronDown, DollarSign, LayoutDashboard } from "lucide-react"
import mainLogo from "@/images/logo.png"
import Image from "next/image"
import QueryWrapper from "@/components/module/query-wrapper"
import { useMenuPricePlan } from "./view-model"
import Link from "next/link"

const Content = () => {
    const vm = useMenuPricePlan()

    return (
        <div>
            <Sidebar>
                <SidebarHeader className="mb-12">
                    <div className="flex gap-2 items-center mx-auto">
                        <Image src={mainLogo} alt="main-logo" width={42} height={42} />
                        <h1 className="text-2xl">NetworkPro</h1>
                    </div>
                </SidebarHeader>
                <SidebarMenu>
                    <SidebarMenuItem className="px-2">
                        <SidebarMenuButton>
                            <Link href="/" className="flex items-center gap-2 w-full text-white/60">
                                <LayoutDashboard size={14}/>
                                <span className="text-lg font-light">Dashboard</span>
                            </Link>
                        </SidebarMenuButton>
                    </SidebarMenuItem>
                </SidebarMenu>
                {vm.getData().map((item, idx) => (
                    <Collapsible defaultOpen className="group/collapsible" key={item.getParentName() + idx}>
                        <SidebarGroup>
                            <SidebarGroupLabel asChild>
                                <CollapsibleTrigger className="flex items-center gap-1 text-white">
                                    <DollarSign size={16} />
                                    <span className="text-lg font-light">
                                        {item.getParentName() === "S" ? "Subscribe" : item.getParentName()}
                                    </span>
                                    <ChevronDown className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
                                </CollapsibleTrigger>
                            </SidebarGroupLabel>
                        </SidebarGroup>
                        <CollapsibleContent className="px-6">
                            <SidebarGroupContent>
                                <SidebarMenu>
                                    {item.getPricePlanTypeDto().map((item) => (
                                        <SidebarMenuItem key={item.id}>
                                            <SidebarMenuButton asChild>
                                                <Link href="#" className=" text-base text-white/70 hover:text-black-80">
                                                    -
                                                    <span>{item.pricePlanTypeName}</span>
                                                </Link>
                                            </SidebarMenuButton>
                                        </SidebarMenuItem>
                                    ))}
                                </SidebarMenu>
                            </SidebarGroupContent>
                        </CollapsibleContent>
                    </Collapsible>
                ))}
            </Sidebar>
        </div>
    )
}

const PricePlanSidebar = () => {
    return (
        <QueryWrapper>
            <Content />
        </QueryWrapper>
    )
}

export default PricePlanSidebar