import { jsx as _jsx } from "react/jsx-runtime";
// (C) 2019-2026 GoodData Corporation
import { memo, useRef, useState } from "react";
import { isMeasureDescriptor } from "@gooddata/sdk-model";
import { DropdownList, GOODSTRAP_SCROLLED_EVENT } from "@gooddata/sdk-ui-kit";
import { ColoredItem } from "./ColoredItem.js";
import { getSearchedItems } from "../../../../utils/colors.js";
const DROPDOWN_MAX_HEIGHT = 150;
const SEARCH_FIELD_VISIBILITY_THRESHOLD = 7;
const DROPDOWN_BODY_WIDTH = 218;
function isChartFillIgnoredMeasure(item, chartFillIgnoredMeasures) {
    return (isMeasureDescriptor(item.mappingHeader) &&
        chartFillIgnoredMeasures.includes(item.mappingHeader.measureHeaderItem.localIdentifier));
}
export const ColoredItemsList = memo(function ColoredItemsList(props) {
    const { colorPalette, inputItems, onSelect: onSelectProp, disabled = false, isLoading = false, chartFill, chartFillIgnoredMeasures, } = props;
    const [searchString, setSearchString] = useState("");
    const listRef = useRef(null);
    const onScroll = () => {
        if (listRef?.current) {
            const node = listRef.current;
            node.dispatchEvent(new CustomEvent(GOODSTRAP_SCROLLED_EVENT, { bubbles: true }));
        }
    };
    const closeOpenDropdownOnSearch = () => {
        // we have to close all dropdown ONE-3526
        // (IE has bug onClick on ClearIcon in Input doesn't fire click event and dropdown will not close)
        // so we can close it by onScroll event
        onScroll();
    };
    const onSearch = (searchString) => {
        setSearchString(searchString);
        closeOpenDropdownOnSearch();
    };
    const isSearchFieldVisible = () => {
        return inputItems.length > SEARCH_FIELD_VISIBILITY_THRESHOLD && !isLoading;
    };
    const onSelect = (selectedColorItem, color) => {
        onSelectProp(selectedColorItem, color);
    };
    const searchStringToUse = isSearchFieldVisible() ? searchString : "";
    const items = getSearchedItems(inputItems, searchStringToUse);
    // if pattern fill was explicitly mapped to measure, use its name as an index for that item,
    // otherwise use the index matching the used color
    const itemPatternFillIndexes = items.map((item, index) => {
        if (!isMeasureDescriptor(item.mappingHeader)) {
            return index;
        }
        const localId = item.mappingHeader.measureHeaderItem.localIdentifier;
        return chartFill?.measureToPatternName?.[localId] ?? index;
    });
    return (_jsx("div", { className: "adi-color-configuration", ref: listRef, children: _jsx(DropdownList, { width: DROPDOWN_BODY_WIDTH, showSearch: isSearchFieldVisible(), searchString: searchStringToUse, onSearch: onSearch, onScroll: onScroll, items: items, className: "gd-colored-items-list", maxHeight: DROPDOWN_MAX_HEIGHT, isLoading: isLoading, renderItem: ({ item, rowIndex }) => {
                const appliedChartFill = isChartFillIgnoredMeasure(item, chartFillIgnoredMeasures)
                    ? undefined
                    : chartFill;
                return (_jsx(ColoredItem, { colorPalette: colorPalette, onSelect: onSelect, disabled: disabled, item: item, chartFill: appliedChartFill, patternFillIndex: itemPatternFillIndexes[rowIndex] }));
            } }) }));
});
//# sourceMappingURL=ColoredItemsList.js.map