import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2022-2026 GoodData Corporation
import { useCallback } from "react";
import { AttributeDropdown } from "./AttributeDropdown/AttributeDropdown.js";
const getAttributeName = (bucketItemNames, available) => bucketItemNames[available.itemId.localIdentifier].name;
export function ChartSortingDropdown({ currentSort, availableSorts, bucketItems, intl, onSelect, }) {
    const onSortChanged = useCallback((newSort, index) => {
        const newSortItems = [...currentSort];
        newSortItems[index] = newSort;
        onSelect(newSortItems);
    }, [onSelect, currentSort]);
    return (_jsx("div", { className: "gd-sort-attribute-section", children: availableSorts?.map((availableSort, index) => {
            // Obtain current sort item with the same id as current index
            const currentSortItem = currentSort[index];
            if (!currentSortItem) {
                return null;
            }
            return (_jsxs("div", { "aria-label": `sort-attribute-${index}`, className: `gd-sort-attribute-item s-sort-attribute-item-${index}`, children: [availableSorts.length > 1 && (_jsx("div", { className: "attribute-sorting-title", children: getAttributeName(bucketItems, availableSort) })), _jsx(AttributeDropdown, { index: index, currentSortItem: currentSortItem, availableSorts: availableSort, bucketItems: bucketItems, intl: intl, onSelect: (newSort) => {
                            onSortChanged(newSort, index);
                        } })
                ] }, index));
        }) }));
}
