import { jsx, jsxs } from "react/jsx-runtime";
import { useRef, useLayoutEffect, useEffect } from "react";
import { NavLink } from "react-router-dom";
function childItemClass(active, child) {
  return [
    "impact-sidebar-routes-list-item-children",
    child.value === active ? "child-route-active" : "",
    child.isDisabled ? "child-route-disabled" : ""
  ].filter(Boolean).join(" ");
}
function ChildMenu({
  parent,
  active,
  menu,
  showChild,
  handleRouteChange,
  isMemoryRouter
}) {
  const containerRef = useRef(null);
  const updateBeforeHeight = () => {
    const container = containerRef.current;
    if (container) {
      const contentHeight = container.scrollHeight;
      container.style.setProperty("--before-height", `${contentHeight}px`);
    }
  };
  useLayoutEffect(() => {
    updateBeforeHeight();
    window.addEventListener("resize", updateBeforeHeight);
    return () => {
      window.removeEventListener("resize", updateBeforeHeight);
    };
  }, []);
  useEffect(() => {
    updateBeforeHeight();
  }, [menu, showChild, parent.value]);
  return /* @__PURE__ */ jsx(
    "div",
    {
      ref: containerRef,
      className: [
        "impact-sidebar-routes-list-children",
        showChild === parent.value ? "child-route-visible" : ""
      ].filter(Boolean).join(" "),
      children: menu.map(
        (child) => isMemoryRouter ? /* @__PURE__ */ jsx(
          NavLink,
          {
            className: "impact-sidebar-routes-list-item-link",
            to: child.link ?? "/",
            children: /* @__PURE__ */ jsxs(
              "div",
              {
                className: childItemClass(active, child),
                onClick: () => {
                  handleRouteChange(parent, child);
                },
                children: [
                  /* @__PURE__ */ jsx("div", { className: "impact-sidebar-routes-list-item-child-icon", children: child.icon }),
                  /* @__PURE__ */ jsx("div", { className: "impact-sidebar-routes-list-item-child-label", children: child.label })
                ]
              }
            )
          },
          child.value
        ) : /* @__PURE__ */ jsxs(
          "div",
          {
            className: childItemClass(active, child),
            onClick: () => {
              handleRouteChange(parent, child);
            },
            children: [
              /* @__PURE__ */ jsx("div", { className: "impact-sidebar-routes-list-item-child-icon", children: child.icon }),
              /* @__PURE__ */ jsx("div", { className: "impact-sidebar-routes-list-item-child-label", children: child.label })
            ]
          },
          child.value
        )
      )
    }
  );
}
ChildMenu.displayName = "ChildMenu";
export {
  ChildMenu
};
