import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2024-2026 GoodData Corporation
import { useCallback, useMemo } from "react";
import { FormattedMessage, useIntl } from "react-intl";
import { Typography, UiIconButton, UiListbox, UiReturnFocusOnUnmount, } from "@gooddata/sdk-ui-kit";
import { useDashboardUserInteraction } from "../../../../model/react/useDashboardUserInteraction.js";
import { ConfigurationBubble } from "../../common/configuration/ConfigurationBubble.js";
const listAriaAttributes = {
    id: "container-directions",
    "aria-labelledby": "container-directions-title",
};
const DROPDOWN_ALIGN_POINTS = [
    { align: "tr tl", offset: { x: -65, y: 18 } },
    { align: "tl tr", offset: { x: 65, y: 18 } },
];
function NestedLayoutConfigurationDialogHeader({ onClose }) {
    return (_jsxs("div", { className: "configuration-panel-header", children: [
            _jsx(Typography, { tagName: "h3", className: "configuration-panel-header-title", id: "container-directions-title", children: _jsx(FormattedMessage, { id: "nestedLayoutToolbar.direction.title" }) }), _jsx(UiIconButton, { icon: "close", variant: "tertiary", size: "small", onClick: onClose, dataId: "s-configuration-panel-header-close-button", dataTestId: "s-configuration-panel-header-close-button" })
        ] }));
}
export function LayoutDirectionConfigurationDialog({ onDirectionChanged, onClose, alignTo, returnFocusToId, currentDirection, isColumnDirectionEnabled = true, ariaAttributes, }) {
    const intl = useIntl();
    const userInteraction = useDashboardUserInteraction();
    const onSelect = useCallback((item) => {
        const direction = item.data;
        if (direction !== currentDirection) {
            onDirectionChanged(direction);
            userInteraction.nestedLayoutInteraction(direction === "row" ? "nestedLayoutDirectionRow" : "nestedLayoutDirectionColumn");
        }
        onClose();
    }, [onDirectionChanged, onClose, currentDirection, userInteraction]);
    const items = useMemo(() => [
        {
            id: "column",
            type: "interactive",
            icon: "directionColumn",
            stringTitle: intl.formatMessage({ id: "nestedLayoutToolbar.direction.column" }),
            data: "column",
            isDisabled: !isColumnDirectionEnabled,
            tooltip: isColumnDirectionEnabled
                ? undefined
                : intl.formatMessage({
                    id: "nestedLayoutToolbar.direction.column.disabledTooltip",
                }),
        },
        {
            id: "row",
            type: "interactive",
            icon: "directionRow",
            stringTitle: intl.formatMessage({ id: "nestedLayoutToolbar.direction.row" }),
            data: "row",
        },
    ], [intl, isColumnDirectionEnabled]);
    return (_jsx(UiReturnFocusOnUnmount, { returnFocusTo: returnFocusToId, children: _jsxs(ConfigurationBubble, { id: ariaAttributes.id, classNames: "gd-nested-layout-configuration__panel", onClose: onClose, closeOnEscape: true, alignTo: alignTo, alignPoints: DROPDOWN_ALIGN_POINTS, children: [
                _jsx(NestedLayoutConfigurationDialogHeader, { onClose: onClose }), _jsx("div", { className: "gd-nested-layout-configuration__content", children: _jsx(UiListbox, { selectedItemId: currentDirection, onSelect: onSelect, items: items, ariaAttributes: listAriaAttributes, isCompact: true }) })
            ] }) }));
}
