import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2024-2026 GoodData Corporation
import { useCallback, useRef } from "react";
import { useIntl } from "react-intl";
import { Bubble, Dropdown, UiDropdownIconButton, UiIconButton, UiTooltip, useIdPrefixed, } from "@gooddata/sdk-ui-kit";
import { getLayoutConfiguration } from "../../../../_staging/dashboard/flexibleLayout/layoutConfiguration.js";
import { useDashboardUserInteraction } from "../../../../model/react/useDashboardUserInteraction.js";
import { LayoutDirectionConfigurationDialog } from "./LayoutDirectionConfigurationDialog.js";
const TOOLBAR_ALIGN_POINTS = [
    { align: "tr tl", offset: { x: 0, y: 11 } },
    { align: "tl tr", offset: { x: -2, y: 11 } },
];
const ARROW_STYLES = { display: "none" };
const ALIGN_TOOLBAR_TO = ".s-dash-item.is-selected";
const IGNORE_TOOLBAR_CLICKS_ON_BY_CLASS = [ALIGN_TOOLBAR_TO]; // do not close on click to the widget
function ToggleDirectionButton({ direction, onWidgetDirectionChanged, }) {
    const intl = useIntl();
    const userInteraction = useDashboardUserInteraction();
    const directionButtonRef = useRef(null);
    const directionConfigurationTriggerId = useIdPrefixed("LayoutDirectionConfigurationTrigger");
    const buttonTooltip = direction === "row"
        ? intl.formatMessage({ id: "nestedLayoutToolbar.direction.row.tooltip" })
        : intl.formatMessage({ id: "nestedLayoutToolbar.direction.column.tooltip" });
    return (_jsx("div", { children: _jsx(Dropdown, { renderButton: ({ isOpen, ariaAttributes, accessibilityConfig, toggleDropdown }) => (_jsx(UiTooltip, { arrowPlacement: "bottom", triggerBy: ["hover", "focus"], optimalPlacement: true, content: buttonTooltip, anchor: _jsx(UiDropdownIconButton, { ref: directionButtonRef, icon: direction === "row" ? "directionRow" : "directionColumn", variant: "tertiary", isDropdownOpen: isOpen, dataTestId: "nested-layout__button--direction", onClick: () => {
                        toggleDropdown();
                        if (isOpen) {
                            userInteraction.nestedLayoutInteraction("nestedLayoutDirectionConfigurationClosed");
                        }
                        else {
                            userInteraction.nestedLayoutInteraction("nestedLayoutDirectionConfigurationOpened");
                        }
                    }, ariaAttributes: ariaAttributes, accessibilityConfig: accessibilityConfig, size: "large" }) })), renderBody: ({ ariaAttributes, closeDropdown }) => (_jsx(LayoutDirectionConfigurationDialog, { ariaAttributes: ariaAttributes, currentDirection: direction, onDirectionChanged: onWidgetDirectionChanged, onClose: () => {
                    closeDropdown();
                    userInteraction.nestedLayoutInteraction("nestedLayoutDirectionConfigurationClosed");
                }, returnFocusToId: directionConfigurationTriggerId, alignTo: directionButtonRef.current })) }) }));
}
function ToggleSectionHeaderButton({ areSectionHeadersEnabled, onToggleHeaders, }) {
    const intl = useIntl();
    const tooltipContent = areSectionHeadersEnabled
        ? intl.formatMessage({ id: "nestedLayoutToolbar.hideHeader" })
        : intl.formatMessage({ id: "nestedLayoutToolbar.showHeader" });
    const userInteraction = useDashboardUserInteraction();
    const onButtonClick = useCallback(() => {
        onToggleHeaders(!areSectionHeadersEnabled);
        userInteraction.nestedLayoutInteraction(areSectionHeadersEnabled ? "nestedLayoutHeaderDisabled" : "nestedLayoutHeaderEnabled");
    }, [areSectionHeadersEnabled, onToggleHeaders, userInteraction]);
    return (_jsx("div", { children: _jsx(UiTooltip, { arrowPlacement: "bottom", triggerBy: ["hover", "focus"], optimalPlacement: true, content: tooltipContent, anchor: _jsx(UiIconButton, { icon: "header", variant: "tertiary", size: "large", isActive: areSectionHeadersEnabled, dataTestId: "s-nested-layout__button--headers", onClick: onButtonClick, label: tooltipContent }) }) }));
}
function RemoveContainerButton({ onWidgetDelete }) {
    const userInteraction = useDashboardUserInteraction();
    const onButtonClick = useCallback(() => {
        onWidgetDelete();
        userInteraction.nestedLayoutInteraction("nestedLayoutRemoved");
    }, [onWidgetDelete, userInteraction]);
    const intl = useIntl();
    const tooltipContent = intl.formatMessage({ id: "nestedLayoutToolbar.remove" });
    return (_jsx("div", { children: _jsx(UiTooltip, { arrowPlacement: "bottom", triggerBy: ["hover", "focus"], optimalPlacement: true, content: tooltipContent, anchor: _jsx(UiIconButton, { icon: "trash", variant: "tertiary", size: "large", dataTestId: "s-nested-layout__button--remove", onClick: onButtonClick, label: tooltipContent }) }) }));
}
export function Toolbar({ layout, onWidgetDelete, onWidgetDirectionChanged, onToggleHeaders, onClose, }) {
    const { sections, direction } = getLayoutConfiguration(layout);
    return (_jsxs(Bubble, { className: "bubble-light", overlayClassName: "gd-nested-layout__toolbar s-nested-layout__toolbar", alignTo: ALIGN_TOOLBAR_TO, alignPoints: TOOLBAR_ALIGN_POINTS, closeOnOutsideClick: true, closeOnParentScroll: false, ignoreClicksOnByClass: IGNORE_TOOLBAR_CLICKS_ON_BY_CLASS, arrowStyle: ARROW_STYLES, onClose: onClose, children: [
            _jsx(ToggleDirectionButton, { direction: direction, onWidgetDirectionChanged: onWidgetDirectionChanged }), _jsx("div", { className: "gd-nested-layout__toolbar__delimiter" }), layout.sections.length > 0 ? (_jsxs(_Fragment, { children: [
                    _jsx(ToggleSectionHeaderButton, { areSectionHeadersEnabled: sections.areHeadersEnabled, onToggleHeaders: onToggleHeaders }), _jsx("div", { className: "gd-nested-layout__toolbar__delimiter" })
                ] })) : null, _jsx(RemoveContainerButton, { onWidgetDelete: onWidgetDelete })
        ] }));
}
//# sourceMappingURL=Toolbar.js.map