"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/Telkomcel.png"
import Image from "next/image"
import QueryWrapper from "@/components/module/query-wrapper"
import Link from "next/link"
import { useMenuPricePlan } from "../../view-model/sidebar-view-model"
import { useEffect } from "react"
import pricePlanStore from "../../store"

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

    const resetState = pricePlanStore.reset

    const onClickMenu = (id: string) => {
        pricePlanStore.setType(id)
        pricePlanStore.setCurrentPage(0)
    }

    useEffect(() => {
        return () => {
            resetState()
        }
    }, [resetState])

    return (
        <div>
            <Sidebar>
                <SidebarHeader className="mb-12">
                    <div className="max-w-[80%] mt-4 ml-4">
                        <Image src={mainLogo} alt="main-logo" />
                    </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 onClick={() => onClickMenu("")}>
                                <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 onClick={() => onClickMenu(item.id)}>
                                                <span className={`text-base hover:text-black-80 ${item.id == pricePlanStore.getType() ? "text-white" : "text-white/70"}`}>
                                                    -
                                                    <span>{item.pricePlanTypeName}</span>
                                                </span>
                                            </SidebarMenuButton>
                                        </SidebarMenuItem>
                                    ))}
                                </SidebarMenu>
                            </SidebarGroupContent>
                        </CollapsibleContent>
                    </Collapsible>
                ))}
            </Sidebar>
        </div>
    )
}

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

export default PricePlanSidebar