"use strict";
const jsxRuntime = require("react/jsx-runtime");
const assert = require("assert");
const React = require("react");
const styles_lib_components_Box_Box_cjs = require("../Box/Box.cjs");
const styles_lib_components_Accordion_AccordionItem_cjs = require("../Accordion/AccordionItem.cjs");
const styles_lib_css_typography_css_cjs = require("../../css/typography.css.cjs");
const styles_lib_components_Autosuggest_Autosuggest_cjs = require("../Autosuggest/Autosuggest.cjs");
const styles_lib_components_Accordion_Accordion_cjs = require("../Accordion/Accordion.cjs");
const styles_lib_css_atoms_atoms_cjs = require("../../css/atoms/atoms.cjs");
const styles_lib_hooks_useIcon_index_cjs = require("../../hooks/useIcon/index.cjs");
const styles_lib_components_MenuItem_useMenuItem_css_cjs = require("./useMenuItem.css.cjs");
const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
const assert__default = /* @__PURE__ */ _interopDefaultCompat(assert);
const MenuRendererContext = React.createContext(
  null
);
const actionTypes = {
  MENU_TRIGGER_UP: 0,
  MENU_ITEM_UP: 1,
  MENU_TRIGGER_DOWN: 2,
  MENU_ITEM_DOWN: 3,
  MENU_ITEM_ESCAPE: 4,
  MENU_ITEM_TAB: 5,
  MENU_ITEM_ENTER: 6,
  MENU_ITEM_SPACE: 7,
  MENU_ITEM_CLICK: 8,
  MENU_ITEM_HOVER: 9,
  MENU_TRIGGER_ENTER: 10,
  MENU_TRIGGER_SPACE: 11,
  MENU_TRIGGER_CLICK: 12,
  MENU_TRIGGER_TAB: 13,
  MENU_TRIGGER_ESCAPE: 14,
  BACKDROP_CLICK: 15
};
const MenuRendererItemContext = React.createContext(null);
const {
  MENU_ITEM_UP,
  MENU_ITEM_DOWN,
  MENU_ITEM_ESCAPE,
  MENU_ITEM_TAB,
  MENU_ITEM_ENTER,
  MENU_ITEM_SPACE,
  MENU_ITEM_CLICK,
  MENU_ITEM_HOVER
} = actionTypes;
const menuItemChildrenSize = "standard";
const menuItemPaddingSize = "small";
function useMenuItem({
  displayName = "MenuItem",
  formElement = false,
  tone,
  onClick,
  data,
  id,
  ...restProps
}) {
  const menuRendererItemContext = React.useContext(MenuRendererItemContext);
  assert__default.default(
    menuRendererItemContext !== null,
    `${displayName} must be rendered as an immediate child of a menu. See the documentation for correct usage: https://seek-oss.github.io/braid-design-system/components/MenuItem`
  );
  if (menuRendererItemContext === null) {
    throw new Error(`${displayName} element rendered outside menu context`);
  }
  const { isHighlighted, index, dispatch, focusTrigger } = menuRendererItemContext;
  const menuItemRef = React.useRef(null);
  React.useEffect(() => {
    var _a;
    if (isHighlighted) {
      (_a = menuItemRef.current) == null ? void 0 : _a.focus();
    }
  }, [isHighlighted]);
  const onKeyDown = (event) => {
    const targetKey = styles_lib_components_Autosuggest_Autosuggest_cjs.normalizeKey(event);
    if (targetKey === "Tab") {
      dispatch({ type: MENU_ITEM_TAB });
    }
    const isArrowPress = targetKey.indexOf("Arrow") === 0;
    const isActionKeyPress = targetKey === "Enter" || targetKey === " ";
    if (isArrowPress || isActionKeyPress) {
      event.preventDefault();
    }
  };
  const onKeyUp = (event) => {
    var _a;
    const targetKey = styles_lib_components_Autosuggest_Autosuggest_cjs.normalizeKey(event);
    const closeActionKeys = ["Enter", " ", "Escape"];
    const action = {
      ArrowDown: { type: MENU_ITEM_DOWN },
      ArrowUp: { type: MENU_ITEM_UP },
      Enter: { type: MENU_ITEM_ENTER, formElement, index, id },
      " ": { type: MENU_ITEM_SPACE, formElement, index, id },
      Escape: { type: MENU_ITEM_ESCAPE }
    };
    if (action[targetKey]) {
      dispatch(action[targetKey]);
    }
    if (targetKey === "Enter" || targetKey === " ") {
      (_a = menuItemRef.current) == null ? void 0 : _a.click();
    }
    if (!formElement && closeActionKeys.indexOf(targetKey) > -1 || formElement && targetKey === "Escape") {
      focusTrigger();
    }
  };
  const hoverBackground = tone === "critical" ? "criticalLight" : "formAccentSoft";
  return {
    MenuItemChildren,
    menuItemProps: {
      role: "menuitem",
      tabIndex: -1,
      ref: menuItemRef,
      id,
      onKeyUp,
      onKeyDown,
      onMouseEnter: () => dispatch({ type: MENU_ITEM_HOVER, value: index }),
      onClick: (event) => {
        event.stopPropagation();
        dispatch({ type: MENU_ITEM_CLICK, formElement, index, id });
        if (typeof onClick === "function") {
          onClick();
        }
      },
      background: isHighlighted ? hoverBackground : void 0,
      className: [
        styles_lib_components_MenuItem_useMenuItem_css_cjs.menuItem,
        styles_lib_css_typography_css_cjs.touchableText[menuItemChildrenSize],
        styles_lib_css_atoms_atoms_cjs.atoms({
          display: "block",
          width: "full",
          paddingX: menuItemPaddingSize,
          cursor: "pointer",
          textAlign: "left",
          outline: "none"
        })
      ],
      ...styles_lib_components_Accordion_Accordion_cjs.buildDataAttributes({ data, validateRestProps: restProps })
    }
  };
}
function MenuItemChildren({
  icon,
  tone,
  children,
  badge,
  formElement = false
}) {
  const menuRendererContext = React.useContext(MenuRendererContext);
  assert__default.default(
    menuRendererContext !== null,
    `MenuItem must be rendered as an immediate child of a menu. See the documentation for correct usage: https://seek-oss.github.io/braid-design-system/components/MenuItem`
  );
  assert__default.default(
    // @ts-expect-error
    !badge || badge.type.__isBadge__,
    `MenuItem badge prop can only be an instance of Badge. e.g. <MenuItem badge={<Badge>New</Badge>}>`
  );
  let leftSlot = null;
  if (!formElement) {
    if (icon) {
      leftSlot = /* @__PURE__ */ jsxRuntime.jsx(
        styles_lib_components_Accordion_AccordionItem_cjs.Text,
        {
          size: menuItemChildrenSize,
          baseline: false,
          tone: tone === "critical" ? tone : void 0,
          children: icon
        }
      );
    } else if (menuRendererContext.reserveIconSpace) {
      leftSlot = /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Box_Box_cjs.Box, { component: "span", display: "block", className: styles_lib_hooks_useIcon_index_cjs.iconSize() });
    }
  }
  return /* @__PURE__ */ jsxRuntime.jsxs(styles_lib_components_Box_Box_cjs.Box, { component: "span", display: "flex", alignItems: "center", minWidth: 0, children: [
    leftSlot ? /* @__PURE__ */ jsxRuntime.jsx(
      styles_lib_components_Box_Box_cjs.Box,
      {
        component: "span",
        paddingRight: menuItemPaddingSize,
        flexShrink: 0,
        minWidth: 0,
        children: leftSlot
      }
    ) : null,
    /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Box_Box_cjs.Box, { component: "span", minWidth: 0, children: /* @__PURE__ */ jsxRuntime.jsx(
      styles_lib_components_Accordion_AccordionItem_cjs.Text,
      {
        size: menuItemChildrenSize,
        baseline: false,
        tone: tone === "critical" ? tone : void 0,
        maxLines: 1,
        children
      }
    ) }),
    badge ? /* @__PURE__ */ jsxRuntime.jsx(
      styles_lib_components_Box_Box_cjs.Box,
      {
        component: "span",
        paddingLeft: menuItemPaddingSize,
        flexShrink: 0,
        minWidth: 0,
        children: badge
      }
    ) : null
  ] });
}
exports.MenuRendererContext = MenuRendererContext;
exports.MenuRendererItemContext = MenuRendererItemContext;
exports.actionTypes = actionTypes;
exports.useMenuItem = useMenuItem;
