import * as React from "react";

import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSub,
  SidebarMenuSubItem,
} from "@/components/ui/sidebar";
import Link from "next/link";
import { Separator } from "../ui/separator";
import { Minus, Plus } from "lucide-react";
import { api } from "@/trpc/server";
import { appConfig } from "@/config/app.config";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "../ui/collapsible";
import { appRoutes } from "@/config";
import SidebarLink from "./sidebar-link";

export async function WikiSidebar({
  ...props
}: React.ComponentProps<typeof Sidebar>) {
  const sidebarContent = await api.app.getSidebarContent();
  return (
    <Sidebar {...props}>
      <SidebarHeader className="flex h-14 items-center justify-center border-b">
        <Link href={"/"}>
          <span className="text-2xl font-bold">{appConfig.name}</span>
        </Link>
      </SidebarHeader>
      <SidebarContent>
        <SidebarGroup>
          <SidebarMenu>
            {sidebarContent?.map((category, index) => (
              <Collapsible
                key={category.id}
                defaultOpen={index === 1}
                className="group/collapsible"
              >
                <SidebarMenuItem>
                  <CollapsibleTrigger asChild>
                    <SidebarMenuButton>
                      <Link href={appRoutes.category(category.slug)}>
                        <span>{category.name}</span>
                      </Link>
                      <Plus className="ml-auto group-data-[state=open]/collapsible:hidden" />
                      <Minus className="ml-auto group-data-[state=closed]/collapsible:hidden" />
                    </SidebarMenuButton>
                  </CollapsibleTrigger>
                  {category?.articles?.length ? (
                    <CollapsibleContent>
                      <SidebarMenuSub>
                        {category.articles.map((article) => (
                          <SidebarMenuSubItem key={article.slug}>
                            <SidebarLink
                              title={article.title!}
                              url={appRoutes.article(article.slug)}
                            />
                          </SidebarMenuSubItem>
                        ))}
                      </SidebarMenuSub>
                    </CollapsibleContent>
                  ) : null}
                </SidebarMenuItem>
              </Collapsible>
            ))}
          </SidebarMenu>
        </SidebarGroup>
      </SidebarContent>
      <SidebarFooter>
        <div className="flex items-center justify-center gap-4">
          <Link
            className="text-xs text-muted-foreground underline"
            href={"/impressum"}
          >
            Impressum
          </Link>
          <Separator orientation="vertical" />
          <Link
            href={"/datenschutz"}
            className="text-xs text-muted-foreground underline"
          >
            Datenschutz
          </Link>
        </div>
      </SidebarFooter>
    </Sidebar>
  );
}