import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2007-2025 GoodData Corporation
import { memo, useCallback, useMemo } from "react";
import cx from "classnames";
import { SATURATION_ARRAY, getColorStyle } from "../utils.js";
export const ColorPickerMatrix = memo(function ColorPickerMatrix(props) {
    return (_jsxs("div", { className: "color-picker-component", children: [
            _jsx(ColorPickerRow, { lightness: 0.7, initColor: props.initColor, onColorSelected: props.onColorSelected }), _jsx(ColorPickerRow, { lightness: 0.5, initColor: props.initColor, onColorSelected: props.onColorSelected }), _jsx(ColorPickerRow, { lightness: 0.3, initColor: props.initColor, onColorSelected: props.onColorSelected })
        ] }));
});
const ColorPickerRow = memo(function ColorPickerRow({ onColorSelected, initColor, lightness, }) {
    const getCellClassNames = useCallback((hslColor) => {
        return cx("color-picker-cell", `s-color-${Math.floor(hslColor.h + (hslColor.s + hslColor.l) * 100)}`);
    }, []);
    const handleColorClick = useCallback((color) => () => {
        onColorSelected(color);
    }, [onColorSelected]);
    const colorCells = useMemo(() => {
        return SATURATION_ARRAY.map((saturation) => {
            const newColor = {
                h: initColor.h,
                s: saturation,
                l: lightness,
            };
            return (_jsx("div", { role: "color", tabIndex: -1, className: getCellClassNames(newColor), style: getColorStyle(newColor), onClick: handleColorClick(newColor) }, lightness + saturation));
        });
    }, [initColor.h, lightness, getCellClassNames, handleColorClick]);
    return _jsx("div", { className: "color-picker-row", children: colorCells });
});
