import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarHeader,
} from "@/components/ui/sidebar";
import logo from "@/assets/image/logo.png";
import { useLocation, useRouter } from "@tanstack/react-router";
import { useMemo } from "react";
import { Badge } from "@/components/ui/badge";

const title = import.meta.env.VITE_APP_TITLE;
const isInside = import.meta.env.VITE_IS_INSIDE === "true";

type Props = {
  menus: any[];
  isAdmin?: boolean;
};

export function AppSidebar({ menus, isAdmin }: Props) {
  const router = useRouter();
  const location = useLocation();
  const currentPath = useMemo(
    () => location.pathname.replace(import.meta.env.VITE_BASEPATH, ""),
    [location.pathname],
  );
  return (
    <Sidebar className="[&_.bg-sidebar]:bg-transparent border-none">
      <SidebarHeader className="m-2 p-0">
        <div className="flex items-center space-x-2 text-left w-full h-[60px]">
          <img
            src={logo}
            alt=""
            className="size-12 object-contain rounded-full bg-white overflow-hidden"
          />
          <div className="text-primary text-2xl font-bold">
            {isAdmin ? "管理后台" : title}
          </div>
          {isInside && (
            <Badge className="bg-transparent text-primary border-primary">
              内网
            </Badge>
          )}
        </div>
      </SidebarHeader>
      <SidebarContent className="rounded-xl bg-white/50 backdrop-blur-lg m-2 mt-0">
        <SidebarGroup>
          <SidebarGroupContent>
            <SidebarMenu>
              {menus.map((item) => (
                <SidebarMenuItem key={item.title}>
                  <SidebarMenuButton
                    asChild
                    isActive={currentPath === item.url}
                    onClick={() => {
                      router.navigate({ to: item.url });
                    }}
                    className="data-[active=true]:!bg-primary data-[active=true]:!text-white hover:bg-primary/10"
                  >
                    <div className="h-[40px] px-4 cursor-pointer">
                      {item.icon}
                      <span>{item.title}</span>
                    </div>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              ))}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
    </Sidebar>
  );
}