import {
    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";

const items = [
    {
        title: "Servers",
        url: "/servers",
        icon: Server,
        isActive: false,
    },
];
const data = {
    navMain: [
        {
            title: "Admin",
            url: "#",
            icon: ShieldCheck,
            items: [
                {
                    title: "Settings",
                    url: "/settings",
                    icon: Settings,
                    isActive: true,
                },
                {
                    title: "Modules",
                    url: "/modules",
                    icon: Settings,
                    isActive: false,
                },
                {
                    title: "Swagger",
                    url: "#",
                    icon: Webhook,
                    isActive: true,
                },
                {
                    title: "Logs",
                    url: "#",
                    icon: Logs,
                    isActive: false,
                },
                {
                    title: "Users",
                    url: "/users",
                    icon: Users,
                    isActive: true,
                },
                {
                    title: "UCD",
                    url: "https://ucd.alpla.net:8443/",
                    icon: Atom,
                    isActive: false,
                    newWindow: true,
                },
                {
                    title: "Lst Api",
                    url: "/api/docs",
                    icon: Webhook,
                    isActive: false,
                },
            ],
        },
    ],
};

export function AdminSideBar() {
    return (
        <SidebarGroup>
            <SidebarGroupLabel>Admin section</SidebarGroupLabel>
            <SidebarGroupContent>
                <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>
            </SidebarGroupContent>
        </SidebarGroup>
    );
}