import { jsx as _jsx } from "react/jsx-runtime";
// (C) 2019-2026 GoodData Corporation
import { memo } from "react";
import { useIntl } from "react-intl";
import { getMappingHeaderFormattedName } from "@gooddata/sdk-ui";
import { ColoredItemContent } from "./ColoredItemContent.js";
import { getTranslation } from "../../../../utils/translations.js";
import { isWaterfallColorHeaderItemKey } from "../../../../utils/uiConfigHelpers/waterfallChartUiConfigHelper.js";
import { ColorDropdown } from "../colorDropdown/ColorDropdown.js";
export const ColoredItem = memo(function ColoredItem(props) {
    const intl = useIntl();
    const { item, colorPalette, onSelect, chartFill, patternFillIndex } = props;
    const renderLoadingItem = () => {
        return _jsx("div", { className: "gd-list-item gd-list-item-not-loaded" });
    };
    const onColorSelected = (color) => {
        if (onSelect) {
            onSelect(item, color);
        }
    };
    const getText = (mappingHeader) => {
        const headerText = getMappingHeaderFormattedName(mappingHeader) || "";
        if (headerText === null || headerText === "") {
            return `(${getTranslation("empty_value", intl)})`;
        }
        return isWaterfallColorHeaderItemKey(headerText) ? getTranslation(headerText, intl) : headerText;
    };
    const coloredItem = item || null;
    if (!coloredItem) {
        return renderLoadingItem();
    }
    const headerItem = coloredItem.mappingHeader;
    const headerText = getText(headerItem);
    return (_jsx(ColorDropdown, { selectedColorItem: coloredItem.colorItem, colorPalette: colorPalette, onColorSelected: onColorSelected, chartFill: chartFill, patternFillIndex: patternFillIndex, children: _jsx(ColoredItemContent, { text: headerText, color: coloredItem.color, chartFill: chartFill?.type, patternFillIndex: patternFillIndex }) }));
});
//# sourceMappingURL=ColoredItem.js.map