/**
 * Copyright (c) 2023-present Plane Software, Inc. and contributors
 * SPDX-License-Identifier: AGPL-3.0-only
 * See the LICENSE file for details.
 */

import { observer } from "mobx-react";
import Link from "next/link";
import { usePathname } from "next/navigation";
// plane internal packages
import { Tooltip } from "@plane/propel/tooltip";
import { cn } from "@plane/utils";
// hooks
import { useTheme } from "@/hooks/store";
import { useSidebarMenu } from "@/hooks/use-sidebar-menu";

export const AdminSidebarMenu = observer(function AdminSidebarMenu() {
  // router
  const pathName = usePathname();
  // store hooks
  const { isSidebarCollapsed, toggleSidebar } = useTheme();
  // derived values
  const sidebarMenu = useSidebarMenu();
  const sidebarMenuGroups = [
    { label: "ИНСТАНС", items: sidebarMenu.slice(0, 4) },
    { label: "ВОЗМОЖНОСТИ", items: sidebarMenu.slice(4) },
  ];

  const handleItemClick = () => {
    if (window.innerWidth < 768) {
      toggleSidebar(!isSidebarCollapsed);
    }
  };

  return (
    <div className="vertical-scrollbar flex scrollbar-sm h-full w-full flex-col overflow-y-scroll px-3 py-4">
      {sidebarMenuGroups.map((group) => (
        <div key={group.label} className="shrink-0 border-b border-white/6 py-3 first:pt-0 last:border-b-0 last:pb-0">
          {!isSidebarCollapsed && <div className="nodedc-admin-sidebar-section-label">{group.label}</div>}
          <div className="flex flex-col gap-1">
            {group.items.map((item) => {
              const isActive = item.href === pathName || Boolean(pathName?.startsWith(item.href));
              return (
                <Link key={item.href} href={item.href} onClick={handleItemClick}>
                  <Tooltip tooltipContent={item.name} position="right" className="ml-2" disabled={!isSidebarCollapsed}>
                    <div
                      className={cn(
                        "nodedc-settings-sidebar-item group flex w-full items-center gap-3 px-3 py-2 text-14 font-medium transition-colors outline-none",
                        isSidebarCollapsed ? "justify-center" : "w-full"
                      )}
                      data-active={isActive}
                    >
                      {<item.Icon className="h-4 w-4 flex-shrink-0" />}
                      {!isSidebarCollapsed && <div className="min-w-0 truncate transition-colors">{item.name}</div>}
                    </div>
                  </Tooltip>
                </Link>
              );
            })}
          </div>
        </div>
      ))}
    </div>
  );
});