import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2007-2026 GoodData Corporation
import { useCallback, useRef, useState } from "react";
import cx from "classnames";
import { FormattedMessage, useIntl } from "react-intl";
import { UiFocusManager } from "../@ui/UiFocusManager/UiFocusManager.js";
import { Button } from "../Button/Button.js";
import { Overlay } from "../Overlay/Overlay.js";
import { isActionKey } from "../utils/events.js";
import { useIdPrefixed } from "../utils/useId.js";
export function HeaderAccount({ className = "", items = [], userName = "", onMenuItemClick, }) {
    const [isOpen, setIsOpen] = useState(false);
    const buttonRef = useRef(null);
    const intl = useIntl();
    const dropdownId = useIdPrefixed("account-dropdown");
    const classNames = cx("gd-header-button", {
        "gd-header-account": true,
        "is-open": isOpen,
        [className]: !!className,
    });
    const toggleAccountMenu = useCallback((newIsOpen = !isOpen) => {
        setIsOpen(newIsOpen);
    }, [isOpen]);
    const toggleAccountMenuHandler = useCallback(() => {
        toggleAccountMenu();
    }, [toggleAccountMenu]);
    const getMenuItems = () => {
        return items.map((item) => {
            return (_jsx(MenuItem, { item: item, toggleMenu: toggleAccountMenu, onMenuItemClick: onMenuItemClick }, item.key));
        });
    };
    const renderAccountMenu = () => {
        return isOpen ? (_jsx(Overlay, { alignTo: ".gd-header-account", alignPoints: [
                {
                    align: "br tr",
                },
            ], closeOnOutsideClick: true, closeOnMouseDrag: true, closeOnParentScroll: true, closeOnEscape: true, onClose: () => {
                toggleAccountMenu(false);
            }, children: _jsx("div", { className: "gd-dialog gd-dropdown overlay gd-header-account-dropdown", id: dropdownId, children: _jsx("div", { className: "gd-list small", children: _jsx(UiFocusManager, { enableAutofocus: true, enableFocusTrap: true, enableReturnFocusOnUnmount: { returnFocusTo: buttonRef }, children: getMenuItems() }) }) }) })) : (false);
    };
    return (_jsxs(Button, { ref: buttonRef, className: classNames, onClick: toggleAccountMenuHandler, title: intl.formatMessage({ id: "gs.header.account.title" }), accessibilityConfig: {
            isExpanded: isOpen,
            popupId: dropdownId,
        }, children: [
            _jsx("span", { className: "gd-header-account-icon gd-icon-user" }), _jsx("span", { className: "gd-header-account-user", children: userName }), renderAccountMenu()] }));
}
function MenuItem({ item, toggleMenu, onMenuItemClick, }) {
    const tabIndexProp = item.href ? {} : { tabIndex: 0 };
    const handleClick = useCallback((e) => {
        toggleMenu(false);
        onMenuItemClick(item, e);
    }, [item, toggleMenu, onMenuItemClick]);
    const handleKeyDown = useCallback((e) => {
        if (isActionKey(e)) {
            e.preventDefault();
            toggleMenu(false);
            onMenuItemClick(item, e);
        }
    }, [item, toggleMenu, onMenuItemClick]);
    return (_jsx("a", { href: item.href, onClick: handleClick, className: `gd-list-item ${item.className}`, onKeyDown: handleKeyDown, ...tabIndexProp, children: _jsx(FormattedMessage, { id: item.key }) }));
}
