import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2025 GoodData Corporation
import { useCallback, useMemo } from "react";
import { useIntl } from "react-intl";
import { Dropdown, DropdownButton, SingleSelectListItem, UiListbox } from "@gooddata/sdk-ui-kit";
const DROPDOWN_WIDTH = 150;
const alignPoints = [
    {
        align: "bl tl",
    },
    {
        align: "tl bl",
    },
];
export function DrillTargetDashboardTabSelector({ tabs, selectedTabId, onSelect, }) {
    const intl = useIntl();
    const items = useMemo(() => {
        return tabs.map((tab) => ({
            id: tab.localIdentifier,
            title: tab.title ? tab.title : intl.formatMessage({ id: "dashboard.tabs.default.label" }),
        }));
    }, [tabs, intl]);
    const selectedItem = useMemo(() => {
        return items.find((item) => item.id === selectedTabId) ?? items[0];
    }, [items, selectedTabId]);
    const handleSelect = useCallback((item) => {
        // Empty id means "Default" (first tab)
        onSelect(item.id || undefined);
    }, [onSelect]);
    // Only render if dashboard has multiple tabs
    if (!tabs || tabs.length <= 1) {
        return null;
    }
    return (_jsxs("div", { className: "gd-drill-target-tab-selector-container", children: [
            _jsx("span", { className: "gd-drill-target-tab-selector__label", children: intl.formatMessage({ id: "configurationPanel.drillConfig.targetTab" }) }), _jsx(Dropdown, { className: "gd-tabs-dropdown s-tabs-dropdown", closeOnParentScroll: true, closeOnMouseDrag: false, closeOnOutsideClick: true, alignPoints: alignPoints, renderButton: ({ isOpen, toggleDropdown }) => (_jsx(DropdownButton, { className: "gd-tabs-dropdown-button", value: selectedItem?.title, isOpen: isOpen, onClick: toggleDropdown })), renderBody: ({ closeDropdown, ariaAttributes }) => {
                    const listboxItems = items.map((item) => ({
                        type: "interactive",
                        id: item.id,
                        stringTitle: item.title,
                        data: item,
                    }));
                    return (_jsx(UiListbox, { shouldKeyboardActionStopPropagation: true, shouldKeyboardActionPreventDefault: true, dataTestId: "s-tab-select-list", items: listboxItems, width: DROPDOWN_WIDTH, selectedItemId: selectedTabId ?? items[0]?.id, shouldCloseOnSelect: true, onSelect: (item) => {
                            handleSelect(item.data);
                        }, onClose: closeDropdown, ariaAttributes: ariaAttributes, InteractiveItemComponent: ({ item, isSelected, onSelect, isFocused }) => {
                            return (_jsx(SingleSelectListItem, { title: item.data.title, isSelected: isSelected, isFocused: isFocused, onClick: onSelect, className: "gd-tab-select_list-item" }));
                        } }));
                } })] }));
}
//# sourceMappingURL=DrillTargetDashboardTabSelector.js.map