import {
    AlignJustify,
    Atom,
    Logs,
    Minus,
    Plus,
    Server,
    Settings,
    ShieldCheck,
    Users,
    Webhook,
} from "lucide-react";
import {
    SidebarGroup,
    SidebarGroupContent,
    SidebarGroupLabel,
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
    SidebarMenuSub,
    SidebarMenuSubButton,
    SidebarMenuSubItem,
} from "../../ui/sidebar";
import {
    Collapsible,
    CollapsibleContent,
    CollapsibleTrigger,
} from "../../ui/collapsible";
import { useSubModuleStore } from "@/lib/store/useSubModuleStore";
import { useSettingStore } from "@/lib/store/useSettings";

const iconMap: any = {
    ShieldCheck: ShieldCheck,
    AlignJustify: AlignJustify,
    Settings: Settings,
    Atom: Atom,
    Logs: Logs,
    Users: Users,
    Webhook: Webhook,
    Server: Server,
};

export function AdminSideBar() {
    const { subModules } = useSubModuleStore();
    const { settings } = useSettingStore();

    const plantToken = settings.filter((n) => n.name === "plantToken");

    const items = subModules.filter((m) => m.moduleName === "admin");
    return (
        <SidebarGroup>
            <SidebarGroupLabel>Admin section</SidebarGroupLabel>
            <SidebarGroupContent>
                {items.map((item: any, index) => {
                    const Icon = iconMap[item.icon] || AlignJustify;
                    // drop down menu setup
                    return (
                        <SidebarMenu key={item.name}>
                            {item.link === "#" ? (
                                <Collapsible
                                    key={item.name}
                                    defaultOpen={index === 1}
                                    className="group/collapsible"
                                >
                                    <SidebarMenuItem>
                                        <CollapsibleTrigger asChild>
                                            <SidebarMenuButton>
                                                <Icon />
                                                {item.name}{" "}
                                                <Plus className="ml-auto group-data-[state=open]/collapsible:hidden" />
                                                <Minus className="ml-auto group-data-[state=closed]/collapsible:hidden" />
                                            </SidebarMenuButton>
                                        </CollapsibleTrigger>
                                        {item.subSubModule?.length > 0 ? (
                                            <CollapsibleContent>
                                                <SidebarMenuSub>
                                                    {item.subSubModule.map(
                                                        (i: any) => {
                                                            const SubIcon =
                                                                iconMap[
                                                                    i.icon
                                                                ] ||
                                                                AlignJustify;
                                                            return (
                                                                <SidebarMenuSubItem
                                                                    key={i.name}
                                                                >
                                                                    {i.isActive && (
                                                                        <SidebarMenuSubButton
                                                                            asChild
                                                                        >
                                                                            <a
                                                                                href={
                                                                                    i.name ===
                                                                                    "Swagger"
                                                                                        ? `https://${plantToken[0].value}prod.alpla.net/application/swagger/index.html`
                                                                                        : i.link
                                                                                }
                                                                                target={
                                                                                    i.newWindow
                                                                                        ? "_blank"
                                                                                        : "_self"
                                                                                }
                                                                            >
                                                                                <SubIcon />
                                                                                <span>
                                                                                    {
                                                                                        i.name
                                                                                    }
                                                                                </span>
                                                                            </a>
                                                                        </SidebarMenuSubButton>
                                                                    )}
                                                                </SidebarMenuSubItem>
                                                            );
                                                        }
                                                    )}
                                                </SidebarMenuSub>
                                            </CollapsibleContent>
                                        ) : null}
                                    </SidebarMenuItem>
                                </Collapsible>
                            ) : (
                                <SidebarMenu>
                                    {items.map((item) => {
                                        if (item.link === "#") return;
                                        return (
                                            <SidebarMenuItem key={item.name}>
                                                <SidebarMenuButton asChild>
                                                    <a href={item.link}>
                                                        <Icon />
                                                        <span>{item.name}</span>
                                                    </a>
                                                </SidebarMenuButton>
                                            </SidebarMenuItem>
                                        );
                                    })}
                                </SidebarMenu>
                            )}
                        </SidebarMenu>
                    );
                })}
            </SidebarGroupContent>
        </SidebarGroup>
    );
}

{
    /* <SidebarMenu>
                    {data.navMain.map((item, index) => (
                        <Collapsible
                            key={item.title}
                            defaultOpen={index === 1}
                            className="group/collapsible"
                        >
                            <SidebarMenuItem>
                                <CollapsibleTrigger asChild>
                                    <SidebarMenuButton>
                                        <item.icon />
                                        {item.title}{" "}
                                        <Plus className="ml-auto group-data-[state=open]/collapsible:hidden" />
                                        <Minus className="ml-auto group-data-[state=closed]/collapsible:hidden" />
                                    </SidebarMenuButton>
                                </CollapsibleTrigger>
                                {item.items?.length ? (
                                    <CollapsibleContent>
                                        <SidebarMenuSub>
                                            {item.items.map((item) => (
                                                <SidebarMenuSubItem
                                                    key={item.title}
                                                >
                                                    {item.isActive && (
                                                        <SidebarMenuSubButton
                                                            asChild
                                                        >
                                                            <a
                                                                href={item.url}
                                                                target={
                                                                    item.newWindow
                                                                        ? "_blank"
                                                                        : "_self"
                                                                }
                                                            >
                                                                <item.icon />
                                                                <span>
                                                                    {item.title}
                                                                </span>
                                                            </a>
                                                        </SidebarMenuSubButton>
                                                    )}
                                                </SidebarMenuSubItem>
                                            ))}
                                        </SidebarMenuSub>
                                    </CollapsibleContent>
                                ) : null}
                            </SidebarMenuItem>
                        </Collapsible>
                    ))}
                </SidebarMenu>
                <SidebarMenu>
                    {items.map((item) => (
                        <SidebarMenuItem key={item.title}>
                            <SidebarMenuButton asChild>
                                <a href={item.url}>
                                    <item.icon />
                                    <span>{item.title}</span>
                                </a>
                            </SidebarMenuButton>
                        </SidebarMenuItem>
                    ))}
                </SidebarMenu> */
}