import { jsx as _jsx } from "react/jsx-runtime";
// (C) 2019-2026 GoodData Corporation
import { memo } from "react";
import cx from "classnames";
import { ColorPaletteItem } from "./ColorPaletteItem.js";
const MAX_SMALL_PALETTE_SIZE = 20;
export const ColorPalette = memo(function ColorPalette({ selectedColorGuid, colorPalette, onColorSelected, chartFill, patternFillIndex, }) {
    const isColorPaletteLarge = () => {
        return colorPalette.length > MAX_SMALL_PALETTE_SIZE;
    };
    const getClassNames = () => {
        const isLargePalette = isColorPaletteLarge();
        return cx({
            "gd-color-drop-down-list-large": isLargePalette,
            "gd-color-drop-down-list": !isLargePalette,
        }, "s-color-drop-down-list");
    };
    const isItemSelected = (guid) => {
        return selectedColorGuid === guid;
    };
    const renderItems = () => {
        return colorPalette.map((item) => {
            return (_jsx(ColorPaletteItem, { selected: isItemSelected(item.guid), paletteItem: item, onColorSelected: onColorSelected, chartFill: chartFill?.type, patternFillIndex: patternFillIndex }, item.guid));
        });
    };
    return (_jsx("div", { "aria-label": "Color palette", className: getClassNames(), children: renderItems() }));
});
//# sourceMappingURL=ColorPalette.js.map