"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CellBgPalette = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const icons_1 = require("@gravity-ui/icons");
const uikit_1 = require("@gravity-ui/uikit");
const classname_1 = require("../../../../../../../classname.js");
const yfm_table_1 = require("../../../../../../../i18n/yfm-table/index.js");
const colors_1 = require("./colors.js");
require("./CellBgPalette.css");
const b = (0, classname_1.cn)('yfm-table-cell-bg-palette');
const CellBgPalette = function YfmTableCellBgPalette({ value, onSelect, }) {
    const handleClick = (swatchValue) => {
        onSelect(swatchValue === colors_1.NO_COLOR_VALUE ? null : swatchValue);
    };
    return ((0, jsx_runtime_1.jsx)("div", { className: b(), children: colors_1.CELL_BG_SWATCHES.map((swatch, index) => {
            const isSelected = swatch.value === colors_1.NO_COLOR_VALUE ? !value : swatch.value === value;
            const isTopRow = index < colors_1.CELL_BG_SWATCHES.length / 2;
            return ((0, jsx_runtime_1.jsx)(uikit_1.Tooltip, { openDelay: 200, placement: isTopRow ? 'top' : 'bottom', content: (0, yfm_table_1.i18n)(swatch.i18nKey), children: (0, jsx_runtime_1.jsx)("button", { type: "button", className: (0, uikit_1.spacing)({ p: 1 }, b('item')), "aria-label": (0, yfm_table_1.i18n)(swatch.i18nKey), "aria-pressed": isSelected, onClick: () => handleClick(swatch.value), 
                    // Parent Menu.Item listens for Enter/Space and re-opens its popup,
                    // shadowing the button's native activation. Handle the keys here
                    // and stop propagation so the swatch is actually selected.
                    onKeyDown: (e) => {
                        if (e.key === 'Enter' || e.key === ' ') {
                            e.preventDefault();
                            e.stopPropagation();
                            handleClick(swatch.value);
                        }
                    }, children: (0, jsx_runtime_1.jsx)("span", { className: b('swatch', {
                            none: swatch.value === colors_1.NO_COLOR_VALUE,
                            color: swatch.value || undefined,
                        }), children: isSelected && ((0, jsx_runtime_1.jsx)("span", { className: b('check'), children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Check, size: 16 }) })) }) }) }, swatch.value));
        }) }));
};
exports.CellBgPalette = CellBgPalette;
//# sourceMappingURL=CellBgPalette.js.map
