import { jsxs, jsx } from "react/jsx-runtime";
import { useRef, useEffect } from "react";
import { MemoryRouter } from "react-router-dom";
import { getAssetUrl } from "../../utils/assetBase.js";
import { SidebarActions } from "./SidebarActions.js";
import { SidebarMenus } from "./SidebarMenus.js";
/* empty css                    */
const HamburgerClose = getAssetUrl("icons/collapse-icon.svg");
const HamburgerOpen = getAssetUrl("icons/hamburger-close.svg");
function Sidebar({
  isOpen,
  setIsOpen,
  handleClose,
  routes,
  actionRoutes,
  parentActive,
  handleParentRouteChange,
  childActive,
  handleChildRouteChange,
  handleLogOut,
  isCloseWhenClickOutside = true,
  isMemoryRouter = true,
  visibleModulesCount,
  className,
  "data-testid": dataTestId
}) {
  const sidebarRef = useRef(null);
  useEffect(() => {
    function handleClickOutside(event) {
      if (sidebarRef.current && !sidebarRef.current.contains(event.target) && isCloseWhenClickOutside && isOpen) {
        handleClose();
      }
    }
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [isOpen, isCloseWhenClickOutside, handleClose]);
  const nav = /* @__PURE__ */ jsxs(
    "nav",
    {
      ref: sidebarRef,
      className: `impact-sidebar-container ${isOpen ? "sidebar-open" : ""} ${className ?? ""}`.trim(),
      "data-testid": dataTestId,
      children: [
        /* @__PURE__ */ jsx(
          "div",
          {
            className: "impact-sidebar-toggle-btns",
            role: "button",
            tabIndex: 0,
            onClick: handleClose,
            onKeyDown: (e) => {
              if (e.key === "Enter" || e.key === " ") {
                e.preventDefault();
                handleClose();
              }
            },
            children: /* @__PURE__ */ jsx("img", { alt: "", src: isOpen ? HamburgerClose : HamburgerOpen })
          }
        ),
        /* @__PURE__ */ jsx(
          SidebarMenus,
          {
            childActive,
            handleChildRouteChange,
            handleParentRouteChange,
            isMemoryRouter,
            isOpen,
            parentActive,
            routes,
            setIsOpen,
            visibleModulesCount
          }
        ),
        /* @__PURE__ */ jsxs("div", { className: "impact-sidebar-actions-container", children: [
          actionRoutes && actionRoutes.length > 0 ? /* @__PURE__ */ jsx(
            SidebarMenus,
            {
              childActive,
              handleChildRouteChange,
              handleParentRouteChange,
              isMemoryRouter,
              isOpen,
              parentActive,
              routes: actionRoutes,
              setIsOpen
            }
          ) : null,
          /* @__PURE__ */ jsx(SidebarActions, { handleLogOut, open: isOpen })
        ] })
      ]
    }
  );
  if (isMemoryRouter) {
    return /* @__PURE__ */ jsx(MemoryRouter, { children: nav });
  }
  return nav;
}
Sidebar.displayName = "Sidebar";
export {
  Sidebar
};
