import React, { useEffect, useRef, useState } from "react";
import { applyMenuKeyboardNavigation } from "../menu/keyboardNavigation";
// Hooks
import { useOutsideClickDetector } from "../../hooks/useOutsideClickDetector";
// Icons
import IconButton from "../notifications/components/shared/IconButton";
// CSS
import "../../assets/css/contextMenu.css";
import { onClickA11y } from "../utils";
export const renderContextMenuAction = (message, menuAction, 
// eslint-disable-next-line @typescript-eslint/no-unused-vars
isMuted) => {
    if (menuAction.display) {
        return (React.createElement("div", { key: `${message === null || message === void 0 ? void 0 : message.id}_${menuAction.name}`, className: "context-menu__action", title: menuAction === null || menuAction === void 0 ? void 0 : menuAction.label, ...onClickA11y(() => { var _a; return (_a = menuAction === null || menuAction === void 0 ? void 0 : menuAction.action) === null || _a === void 0 ? void 0 : _a.call(menuAction, message); }) }, menuAction === null || menuAction === void 0 ? void 0 :
            menuAction.icon,
            React.createElement("span", { className: "btn-label" }, menuAction === null || menuAction === void 0 ? void 0 : menuAction.label)));
    }
};
/**
 * Context menu component for notifications that will provide a set of actions
 * a user can perform on a notification (e.g. dismiss, snooze)
 */
const ContextMenu = ({ closeSelf, children }) => {
    const wrapperRef = useRef(null);
    const [className, setClassName] = useState("context-menu__container");
    useOutsideClickDetector(wrapperRef, () => closeSelf(false));
    const moveElementIntoView = () => {
        var _a;
        const bottomViewPort = window.innerHeight + window.scrollY;
        const domRect = (_a = wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
        const elementBottom = domRect ? domRect.y + domRect.height + window.scrollY : null;
        const elementLeft = domRect ? domRect.x : null;
        if (elementBottom && elementBottom > bottomViewPort) {
            setClassName("context-menu__container flow-up");
        }
        if (elementLeft && elementLeft < 0) {
            setClassName(`${className} flow-right`);
        }
    };
    useEffect(() => {
        moveElementIntoView();
    }, [className]);
    useEffect(() => {
        window.addEventListener("blur", () => closeSelf(false));
        return () => {
            window.removeEventListener("blur", () => closeSelf(false));
        };
    }, []);
    applyMenuKeyboardNavigation(window, ".context-menu__action");
    return (React.createElement("div", { ref: wrapperRef, className: className }, children));
};
const ContextMenuToggle = ({ menuActions, message = null, isMuteFilterApplied = false }) => {
    const [contextMenuOpen, setContextMenuOpen] = useState(false);
    const toggleContextMenu = (e) => {
        setContextMenuOpen(!contextMenuOpen);
        e === null || e === void 0 ? void 0 : e.preventDefault();
        e === null || e === void 0 ? void 0 : e.stopPropagation();
    };
    const menuActionsElements = Object.values(menuActions).map((value) => renderContextMenuAction(message, value, isMuteFilterApplied));
    return (React.createElement(IconButton, { iconName: "ff-dots-vert", tooltip: "Options", clickHandler: toggleContextMenu }, contextMenuOpen ? React.createElement(ContextMenu, { closeSelf: setContextMenuOpen }, menuActionsElements) : null));
};
export default ContextMenuToggle;
//# sourceMappingURL=ContextMenu.js.map