import { jsxs, jsx } from "react/jsx-runtime";
import { forwardRef, useRef, useImperativeHandle, useState } from "react";
import { IconMenuItem } from "./IconMenuItem.js";
/* empty css                 */
import Menu from "../../node_modules/@mui/material/Menu/Menu.js";
const NestedMenuItem = forwardRef((props, ref) => {
  const {
    parentMenuOpen,
    // label: _label,
    renderLabel,
    // icon,
    children,
    className,
    tabIndex: tabIndexProp,
    ContainerProps: ContainerPropsProp = {},
    MenuProps,
    delay = 0,
    item,
    disabled,
    ...MenuItemProps
  } = props;
  const { ref: containerRefProp, ...ContainerProps } = ContainerPropsProp;
  const menuItemRef = useRef(null);
  useImperativeHandle(
    ref,
    () => menuItemRef.current,
    []
  );
  const containerRef = useRef(null);
  useImperativeHandle(
    containerRefProp,
    () => containerRef.current,
    []
  );
  const menuContainerRef = useRef(null);
  const timeoutRef = useRef(null);
  const [isSubMenuOpen, setIsSubMenuOpen] = useState(false);
  const handleMouseEnter = (e) => {
    timeoutRef.current = setTimeout(() => {
      var _a;
      if (!disabled) {
        setIsSubMenuOpen(true);
      }
      (_a = ContainerProps.onMouseEnter) == null ? void 0 : _a.call(ContainerProps, e);
    }, delay);
  };
  const handleMouseLeave = (e) => {
    var _a;
    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current);
      timeoutRef.current = null;
    }
    setIsSubMenuOpen(false);
    (_a = ContainerProps.onMouseLeave) == null ? void 0 : _a.call(ContainerProps, e);
  };
  const isSubmenuFocused = () => {
    var _a;
    const active = ((_a = containerRef.current) == null ? void 0 : _a.ownerDocument.activeElement) ?? null;
    if (menuContainerRef.current == null) return false;
    for (const child of menuContainerRef.current.children) {
      if (child === active) return true;
    }
    return false;
  };
  const handleFocus = (e) => {
    var _a;
    if (e.target === containerRef.current && !disabled) {
      setIsSubMenuOpen(true);
    }
    (_a = ContainerProps.onFocus) == null ? void 0 : _a.call(ContainerProps, e);
  };
  const handleKeyDown = (e) => {
    var _a, _b;
    if (e.key === "Escape") return;
    if (isSubmenuFocused()) {
      e.stopPropagation();
    }
    const active = (_a = containerRef.current) == null ? void 0 : _a.ownerDocument.activeElement;
    if (e.key === "ArrowLeft" && isSubmenuFocused() && containerRef.current) {
      containerRef.current.focus();
    }
    if (e.key === "ArrowRight" && e.target === containerRef.current && e.target === active) {
      const firstChild = (_b = menuContainerRef.current) == null ? void 0 : _b.children[0];
      if (firstChild instanceof HTMLElement) {
        firstChild.focus();
      }
    }
  };
  const open = isSubMenuOpen && parentMenuOpen;
  const tabIndex = disabled ? void 0 : tabIndexProp ?? -1;
  return /* @__PURE__ */ jsxs(
    "div",
    {
      ...ContainerProps,
      ref: containerRef,
      role: "menuitem",
      tabIndex,
      onFocus: handleFocus,
      onKeyDown: handleKeyDown,
      onMouseEnter: handleMouseEnter,
      onMouseLeave: handleMouseLeave,
      children: [
        /* @__PURE__ */ jsx(
          IconMenuItem,
          {
            ref: menuItemRef,
            childOpen: open,
            className,
            icon: item.icon,
            item,
            label: item.label,
            MenuItemProps,
            renderLabel,
            children
          }
        ),
        /* @__PURE__ */ jsx(
          Menu,
          {
            disableAutoFocus: true,
            disableEnforceFocus: true,
            anchorEl: menuItemRef.current,
            anchorOrigin: { horizontal: "right", vertical: "top" },
            className: "ia-styles ia-menu",
            id: "basic-menu",
            open,
            style: { pointerEvents: "none", marginLeft: "12px" },
            transformOrigin: { horizontal: "left", vertical: "top" },
            onClose: () => {
              setIsSubMenuOpen(false);
            },
            ...MenuProps,
            children: /* @__PURE__ */ jsx(
              "div",
              {
                ref: menuContainerRef,
                style: {
                  pointerEvents: "auto",
                  display: "flex",
                  flexDirection: "column",
                  gap: "4px"
                },
                children
              }
            )
          }
        )
      ]
    }
  );
});
NestedMenuItem.displayName = "NestedMenuItem";
export {
  NestedMenuItem
};
