import { jsx as _jsx } from "react/jsx-runtime";
// (C) 2020-2026 GoodData Corporation
import { forwardRef, useCallback, useMemo } from "react";
import cx from "classnames";
import { Dropdown, UiListbox, } from "@gooddata/sdk-ui-kit";
import { useDashboardUserInteraction } from "../../../../model/react/useDashboardUserInteraction.js";
import { DashboardItemHeadline } from "../../../presentationComponents/DashboardItems/DashboardItemHeadline.js";
const alignPoints = [
    {
        align: "bc tc",
        offset: { x: 0, y: -9 },
    },
    {
        align: "tc bc",
        offset: { x: 0, y: 9 },
    },
];
export function VisualizationSwitcherNavigationHeader({ widget, clientWidth, clientHeight, activeVisualization, onActiveVisualizationChange, exportData, }) {
    const userInteraction = useDashboardUserInteraction();
    const items = useMemo(() => {
        return widget.visualizations.map((visualization) => ({
            type: "interactive",
            id: visualization.identifier,
            stringTitle: visualization.title,
            data: visualization,
        }));
    }, [widget.visualizations]);
    const handleSelectVisualization = useCallback((item) => {
        onActiveVisualizationChange(item.id);
        userInteraction.visualizationSwitcherInteraction("visualizationSwitcherSwitched");
    }, [onActiveVisualizationChange, userInteraction]);
    return (_jsx(Dropdown, { alignPoints: alignPoints, autofocusOnOpen: true, renderBody: ({ closeDropdown, ariaAttributes }) => (_jsx(UiListbox, { items: items, selectedItemId: activeVisualization.identifier, onSelect: handleSelectVisualization, onClose: closeDropdown, ariaAttributes: ariaAttributes, maxWidth: clientWidth ?? 200, dataTestId: "s-visualization-switcher-widget-list", itemDataTestId: "s-visualization-switcher-widget-list-item" })), renderButton: ({ toggleDropdown, isOpen, ariaAttributes, buttonRef }) => (_jsx(VisualizationSwitcherNavigationHeaderButton, { title: activeVisualization.title, isOpen: isOpen, toggleDropdown: toggleDropdown, clientHeight: clientHeight, exportData: exportData, ariaAttributes: ariaAttributes, ref: buttonRef })) }));
}
const VisualizationSwitcherNavigationHeaderButton = forwardRef(function VisualizationSwitcherNavigationHeaderButton({ isOpen, toggleDropdown, title, clientHeight, ariaAttributes, exportData }, ref) {
    const classNames = cx("gd-visualization-switcher-widget-header s-visualization-switcher-widget-header", {
        "is-open": isOpen,
    });
    return (_jsx("div", { ref: ref, className: classNames, onClick: toggleDropdown, tabIndex: 0, ...exportData, ...ariaAttributes, children: _jsx(DashboardItemHeadline, { clientHeight: clientHeight, title: title }) }));
});
//# sourceMappingURL=VisualizationSwitcherNavigationHeader.js.map