import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2007-2025 GoodData Corporation
import { memo, useCallback, useMemo } from "react";
import cx from "classnames";
import { FormattedMessage, useIntl } from "react-intl";
import { v4 as uuid } from "uuid";
export const HeaderMenu = memo(function HeaderMenu({ className = "", onMenuItemClick = (v) => v, sections = [], }) {
    const intl = useIntl();
    const classNames = useMemo(() => cx("gd-header-menu", className), [className]);
    const ariaLabel = useMemo(() => intl.formatMessage({ id: "gs.header.menu.accessibility.label" }), [intl]);
    const handleItemClick = useCallback((item) => {
        return item.onClick ? item.onClick : (event) => onMenuItemClick(item, event);
    }, [onMenuItemClick]);
    const renderSection = useCallback((items) => {
        return items.map((item) => {
            const clickHandler = handleItemClick(item);
            const itemClassNames = cx("gd-header-menu-item gd-list-help-menu-item", {
                active: item.isActive,
                [item.className]: !!item.className,
            });
            return (_jsxs("a", { onClick: clickHandler, href: item.href, className: itemClassNames, target: item.target, rel: item.target === "_blank" ? "noreferrer noopener" : undefined, children: [item.icon ? item.icon : null, item.iconName ? _jsx("i", { className: cx(item.iconName, "gd-icon") }) : null, _jsx("span", { className: item.className, children: _jsx(FormattedMessage, { id: item.key }) })
                ] }, item.key));
        });
    }, [handleItemClick]);
    const renderSections = useCallback(() => {
        return sections.map((items) => {
            return (_jsx("nav", { "aria-label": ariaLabel, className: "gd-header-menu-section gd-header-measure", children: renderSection(items) }, `section-${uuid()}`));
        });
    }, [sections, ariaLabel, renderSection]);
    return _jsx("div", { className: classNames, children: renderSections() });
});
