"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const react_core_1 = require("@patternfly/react-core");
const angle_right_icon_1 = tslib_1.__importDefault(require("@patternfly/react-icons/dist/esm/icons/angle-right-icon"));
const react_styles_1 = require("@patternfly/react-styles");
const topology_components_1 = tslib_1.__importDefault(require("../../css/topology-components"));
// FIXME fully qualified due to the effect of long build times on storybook
const Popper_1 = tslib_1.__importDefault(require("../popper/Popper"));
/**
 * Check if an event target implements the [DOM Node interface][1].
 * Needed to prevent runtime errors where the event target is not a DOM node,
 * but `contains` is still called on it.
 *
 * [1]: https://developer.mozilla.org/en-US/docs/Web/API/Node
 */
const implementsDOMNode = (node) => {
    return node && typeof node === 'object' && node.nodeType && node.nodeName;
};
const ContextSubMenuItem = (_a) => {
    var _b;
    var { label, children } = _a, other = tslib_1.__rest(_a, ["label", "children"]);
    const nodeRef = (0, react_1.useRef)(null);
    const subMenuRef = (0, react_1.useRef)(null);
    const [open, setOpen] = (0, react_1.useState)(false);
    const referenceCb = (0, react_1.useCallback)(() => nodeRef.current || { x: 0, y: 0 }, []);
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_core_1.DropdownItem, Object.assign({}, other, { className: (0, react_styles_1.css)(topology_components_1.default.topologyContextSubMenu), ref: nodeRef, 
                // prevent this DropdownItem from executing like a normal action item
                onClick: (e) => e.stopPropagation(), 
                // mouse enter will open the sub menu
                onMouseEnter: () => setOpen(true), onMouseLeave: (e) => {
                    // if the mouse leaves this item, close the sub menu only if the mouse did not enter the sub menu itself
                    if (!subMenuRef.current ||
                        (implementsDOMNode(e.relatedTarget) && !subMenuRef.current.contains(e.relatedTarget))) {
                        setOpen(false);
                    }
                }, onKeyDown: (e) => {
                    // open the sub menu on enter or right arrow
                    if (e.key === 'ArrowRight' || e.key === 'Enter') {
                        setOpen(true);
                        e.stopPropagation();
                    }
                } }, { children: [label, (0, jsx_runtime_1.jsx)(angle_right_icon_1.default, { className: (0, react_styles_1.css)(topology_components_1.default.topologyContextSubMenuArrow) })] })), (0, jsx_runtime_1.jsx)(Popper_1.default, Object.assign({ open: open, placement: "right-start", closeOnEsc: true, closeOnOutsideClick: true, onRequestClose: (e) => {
                    // only close the sub menu if clicking anywhere outside the menu item that owns the sub menu
                    if (!e || !nodeRef.current || (implementsDOMNode(e.target) && !nodeRef.current.contains(e.target))) {
                        setOpen(false);
                    }
                }, reference: referenceCb, container: (_b = nodeRef.current) === null || _b === void 0 ? void 0 : _b.closest('.pf-v6-c-menu__content'), returnFocus: true }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Menu, Object.assign({ onMouseLeave: (e) => {
                        // only close the sub menu if the mouse does not enter the item
                        if (!nodeRef.current ||
                            (implementsDOMNode(e.relatedTarget) && !nodeRef.current.contains(e.relatedTarget))) {
                            setOpen(false);
                        }
                    }, onKeyDown: (e) => {
                        // close the sub menu on left arrow
                        if (e.key === 'ArrowLeft') {
                            setOpen(false);
                            e.stopPropagation();
                        }
                    }, ref: subMenuRef, role: "presentation", isNavFlyout: true }, { children: children })) }))] }));
};
exports.default = ContextSubMenuItem;
//# sourceMappingURL=ContextSubMenuItem.js.map