import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2024-2026 GoodData Corporation
import cx from "classnames";
import { FormattedMessage } from "react-intl";
import { Bubble, BubbleHoverTrigger, IconVisualizationSwitcher, OverlayController, OverlayControllerProvider, useMediaQuery, } from "@gooddata/sdk-ui-kit";
import { useTheme } from "@gooddata/sdk-ui-theme-provider";
import { DASHBOARD_DIALOG_OVERS_Z_INDEX } from "../../constants/zIndex.js";
const bubbleAlignPoints = [{ align: "cr cl", offset: { x: 5, y: 0 } }];
const overlayController = OverlayController.getInstance(DASHBOARD_DIALOG_OVERS_Z_INDEX);
export function AddVisualizationSwitcherWidgetButton() {
    const isMobileDevice = useMediaQuery("mobileDevice");
    const theme = useTheme();
    return (_jsxs("div", { className: "add-item-placeholder add-panel-item s-add-visualization-switcher", children: [
            _jsx(IconVisualizationSwitcher, { color: theme?.palette?.complementary?.c6 ?? "#94a1ad" }), _jsx(FormattedMessage, { id: "addPanel.visualizationSwitcher" }), _jsx(OverlayControllerProvider, { overlayController: overlayController, children: _jsxs(BubbleHoverTrigger, { eventsOnBubble: true, className: "gd-add-item-placeholder-help-trigger gd-add-visualization-switcher s-add-visualization-switcher-bubble-trigger", children: [
                        _jsx("div", { className: cx("s-description-trigger", {
                                "is-mobile": isMobileDevice,
                            }), children: _jsx("div", { className: "gd-icon-circle-question" }) }), _jsx(Bubble, { alignPoints: bubbleAlignPoints, alignTo: ".gd-add-item-placeholder-help-trigger", children: _jsx(FormattedMessage, { id: "addPanel.visualizationSwitcher.tooltip" }) })
                    ] }) })
        ] }));
}
