import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2024-2026 GoodData Corporation
import { useCallback } from "react";
import cx from "classnames";
import { FormattedMessage } from "react-intl";
import { Bubble, BubbleHoverTrigger, GD_COLOR_HIGHLIGHT, IconArrowLeft, IconArrowRight, IconTrash, IconVisualizationSwitcher, } from "@gooddata/sdk-ui-kit";
import { useTheme } from "@gooddata/sdk-ui-theme-provider";
import { useDashboardUserInteraction } from "../../../../model/react/useDashboardUserInteraction.js";
const bubbleAlignPoints = [{ align: "tc bc", offset: { x: 0, y: -8 } }];
export function ToolbarTop({ visualizations, onNavigate, activeVisualizationId: activeWidgetId, onDelete, toggleVisualizationsList, visualizationsListShown, }) {
    const theme = useTheme();
    const userInteraction = useDashboardUserInteraction();
    const activeWidgetIndex = visualizations.findIndex((vis) => vis.identifier === activeWidgetId);
    const prevDisabled = activeWidgetIndex <= 0;
    const nextDisabled = activeWidgetIndex === -1 || activeWidgetIndex >= visualizations.length - 1;
    const iconColor = visualizationsListShown
        ? (theme?.palette?.primary?.base ?? GD_COLOR_HIGHLIGHT)
        : (theme?.palette?.complementary?.c7 ?? "#6D7680");
    const enabledColor = theme?.palette?.complementary?.c7 ?? "#6D7680";
    const disabledColor = theme?.palette?.complementary?.c5 ?? "#B0BECA";
    const prevColor = prevDisabled ? disabledColor : enabledColor;
    const nextColor = nextDisabled ? disabledColor : enabledColor;
    const onNavigatePrev = useCallback(() => {
        if (prevDisabled) {
            return;
        }
        const prevIndex = activeWidgetIndex - 1;
        const prevWidgetId = visualizations[prevIndex].identifier;
        onNavigate(prevWidgetId);
    }, [activeWidgetIndex, visualizations, onNavigate, prevDisabled]);
    const onNavigateNext = useCallback(() => {
        if (nextDisabled) {
            return;
        }
        const nextIndex = activeWidgetIndex + 1;
        const nextWidgetId = visualizations[nextIndex].identifier;
        onNavigate(nextWidgetId);
    }, [activeWidgetIndex, visualizations, onNavigate, nextDisabled]);
    const leftSectionClassName = cx("left-section", visualizationsListShown ? "is-active" : null);
    const navigatePrevClassName = cx("navigate-button", "navigate-prev", prevDisabled ? "is-disabled" : null);
    const navigateNextClassName = cx("navigate-button", "navigate-next", nextDisabled ? "is-disabled" : null);
    return (_jsxs("div", { className: "gd-visualization-switcher-toolbar-top bubble bubble-light", children: [
            _jsx("div", { className: leftSectionClassName, onClick: toggleVisualizationsList, children: _jsxs(BubbleHoverTrigger, { eventsOnBubble: true, children: [
                        _jsx(IconVisualizationSwitcher, { color: iconColor, width: 20, height: 20 }), _jsx(Bubble, { alignPoints: bubbleAlignPoints, children: _jsx(FormattedMessage, { id: "visualizationSwitcherToolbar.visualizationsList.tooltip" }) })
                    ] }) }), _jsx("div", { className: "vertical-divider" }), _jsxs("div", { className: "middle-section", children: [
                    _jsx("div", { className: navigatePrevClassName, onClick: onNavigatePrev, children: _jsxs(BubbleHoverTrigger, { eventsOnBubble: true, children: [
                                _jsx(IconArrowLeft, { color: prevColor }), _jsx(Bubble, { alignPoints: bubbleAlignPoints, children: _jsx(FormattedMessage, { id: "visualizationSwitcherToolbar.visualizationsList.prev" }) })
                            ] }) }), _jsxs("div", { className: "status", children: [activeWidgetIndex + 1, "/", visualizations.length] }), _jsx("div", { className: navigateNextClassName, onClick: onNavigateNext, children: _jsxs(BubbleHoverTrigger, { eventsOnBubble: true, children: [
                                _jsx(IconArrowRight, { color: nextColor }), _jsx(Bubble, { alignPoints: bubbleAlignPoints, children: _jsx(FormattedMessage, { id: "visualizationSwitcherToolbar.visualizationsList.next" }) })
                            ] }) })
                ] }), _jsx("div", { className: "vertical-divider" }), _jsx("div", { className: "right-section", children: _jsx("div", { className: "s-visualization-switcher-remove-button", onClick: () => {
                        onDelete();
                        userInteraction.visualizationSwitcherInteraction("visualizationSwitcherRemoved");
                    }, children: _jsxs(BubbleHoverTrigger, { eventsOnBubble: true, children: [
                            _jsx(IconTrash, { className: "gd-trash-icon", width: 20 }), _jsx(Bubble, { alignPoints: bubbleAlignPoints, children: _jsx(FormattedMessage, { id: "visualizationSwitcherToolbar.remove" }) })
                        ] }) }) })
        ] }));
}
//# sourceMappingURL=ToolbarTop.js.map