import { IconType } from "react-icons";
import { NavLink } from "react-router-dom";
import { Sheet, SheetContent } from "@/components/ui/sheet";
import Logo from "./Logo";
import { ENV } from "@/env";
import { navbarLinks } from "@/pages/site-navigation";

function Sidebar({
  sheetOpen,
  setSheetOpen,
}: {
  sheetOpen: boolean;
  setSheetOpen: (open: boolean) => void;
}) {
  const sidebar = (
    <aside className="sticky top-0 overflow-y-auto scrollbar-hidden py-4 lg:pt-0 flex flex-col ml-1 lg:w-56 gap-0">
      {navbarLinks.map((item) => (
        <SidebarItem
          key={item.id}
          Icon={item.icon}
          title={item.title}
          url={item.url}
          dev={item.dev}
          onClick={() => setSheetOpen(false)}
        />
      ))}
    </aside>
  );

  return (
    <>
      <div className="hidden">{sidebar}</div>

      <Sheet
        open={sheetOpen}
        modal={false}
        onOpenChange={() => setSheetOpen(false)}
      >
        <SheetContent side="left" className="w-[120px]">
          <div className="w-full flex flex-row justify-center">
            <div className="w-10">
              <Logo />
            </div>
          </div>
          {sidebar}
        </SheetContent>
      </Sheet>
    </>
  );
}

type SidebarItemProps = {
  Icon: IconType;
  title: string;
  url: string;
  dev?: boolean;
  onClick?: () => void;
};

function SidebarItem({ Icon, title, url, dev, onClick }: SidebarItemProps) {
  const shouldRender = dev ? ENV !== "production" : true;

  return (
    shouldRender && (
      <NavLink
        to={url}
        onClick={onClick}
        className={({ isActive }) =>
          `py-4 px-2 flex flex-col lg:flex-row items-center rounded-lg gap-2 lg:w-full hover:bg-border ${
            isActive ? "font-bold bg-popover text-popover-foreground" : ""
          }`
        }
      >
        <Icon className="w-6 h-6 mr-1" />
        <div className="text-sm text-center">{title}</div>
      </NavLink>
    )
  );
}

export default Sidebar;