import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2021-2025 GoodData Corporation
import { useCallback, useRef, useState } from "react";
import cx from "classnames";
import { isEmpty } from "lodash-es";
import { FormattedMessage, injectIntl } from "react-intl";
import { UiFocusManager } from "../@ui/UiFocusManager/UiFocusManager.js";
import { Button } from "../Button/Button.js";
import { Overlay } from "../Overlay/Overlay.js";
import { useIdPrefixed } from "../utils/useId.js";
function CoreHeaderHelp({ className, items, helpMenuDropdownAlignPoints, onMenuItemClick, disableDropdown, onHelpClicked, helpRedirectUrl, intl, }) {
    const [isOpen, setIsOpen] = useState(false);
    const helpMenuButtonRef = useRef(null);
    const dropdownId = useIdPrefixed("help-dropdown");
    const classNames = cx({
        "gd-header-help": true,
        "gd-icon-header-help": true,
        "is-open": isOpen && !helpRedirectUrl,
        "anchor-tag-header-help": !isEmpty(helpRedirectUrl),
        [className]: !!className,
    });
    const menuItems = items.map((item) => {
        return (_jsxs("a", { role: "option", href: item.href, target: item.target, rel: item.target === "_blank" ? "noreferrer noopener" : undefined, onClick: () => {
                menuItemClicked(item);
            }, className: cx("gd-list-item gd-list-help-menu-item", {
                [item.className]: !!item.className,
            }), children: [item.iconName ? _jsx("i", { className: cx(item.iconName, "gd-icon") }) : null, item.icon ? item.icon : null, _jsx("span", { children: item.label ?? _jsx(FormattedMessage, { id: item.key }) })
            ] }, item.key));
    });
    const toggleHelpMenu = useCallback((isMenuOpen = !isOpen) => {
        onHelpClicked?.(isMenuOpen);
        setIsOpen(isMenuOpen);
    }, [isOpen, onHelpClicked]);
    const menuItemClicked = (...args) => {
        toggleHelpMenu(false);
        onMenuItemClick?.(...args);
    };
    /**
     * Menu dropdown content is long enough to make it max-width (240px),
     * so it should just switch alignment to bottom right corner of the Help button.
     */
    const getHelpDropdownAlignPoints = () => {
        const defaultAlignPoints = [
            {
                align: "br tr",
            },
        ];
        if (!helpMenuButtonRef.current ||
            !helpMenuDropdownAlignPoints ||
            helpMenuDropdownAlignPoints === "br tr" ||
            window.innerWidth - helpMenuButtonRef.current.offsetLeft < 240) {
            return defaultAlignPoints;
        }
        return [
            {
                align: helpMenuDropdownAlignPoints,
            },
        ];
    };
    const renderHelpMenu = () => {
        return isOpen ? (_jsx(Overlay, { alignTo: ".gd-header-help", alignPoints: getHelpDropdownAlignPoints(), closeOnOutsideClick: true, closeOnMouseDrag: true, closeOnParentScroll: true, closeOnEscape: true, onClose: () => {
                toggleHelpMenu(false);
            }, children: disableDropdown ? null : (_jsx(UiFocusManager, { enableFocusTrap: true, enableAutofocus: true, enableReturnFocusOnUnmount: { returnFocusTo: helpMenuButtonRef }, children: _jsx("div", { id: dropdownId, className: "gd-dialog gd-dropdown overlay gd-header-help-dropdown", role: "listbox", "aria-label": intl.formatMessage({ id: "gs.header.help.label" }), children: _jsx("div", { className: "gd-list small", children: menuItems }) }) })) })) : (false);
    };
    return helpRedirectUrl ? (_jsx("a", { className: classNames, href: helpRedirectUrl, target: "_blank", rel: "noreferrer noopener", children: _jsx(FormattedMessage, { id: "gs.header.help" }) })) : (_jsxs(Button, { className: cx(classNames, "gd-header-button"), onClick: () => toggleHelpMenu(), accessibilityConfig: {
            isExpanded: isOpen,
            popupId: dropdownId,
        }, ref: helpMenuButtonRef, children: [
            _jsx(FormattedMessage, { id: "gs.header.help" }), renderHelpMenu()] }));
}
export const HeaderHelp = injectIntl(CoreHeaderHelp);
