import { jsx as _jsx } from "react/jsx-runtime";
import { Check } from '@gravity-ui/icons';
import { Icon, Tooltip, spacing } from '@gravity-ui/uikit';
import { cn } from "../../../../../../../classname.js";
import { i18n } from "../../../../../../../i18n/yfm-table/index.js";
import { CELL_BG_SWATCHES, NO_COLOR_VALUE } from "./colors.js";
import "./CellBgPalette.css";
const b = cn('yfm-table-cell-bg-palette');
export const CellBgPalette = function YfmTableCellBgPalette({ value, onSelect, }) {
    const handleClick = (swatchValue) => {
        onSelect(swatchValue === NO_COLOR_VALUE ? null : swatchValue);
    };
    return (_jsx("div", { className: b(), children: CELL_BG_SWATCHES.map((swatch, index) => {
            const isSelected = swatch.value === NO_COLOR_VALUE ? !value : swatch.value === value;
            const isTopRow = index < CELL_BG_SWATCHES.length / 2;
            return (_jsx(Tooltip, { openDelay: 200, placement: isTopRow ? 'top' : 'bottom', content: i18n(swatch.i18nKey), children: _jsx("button", { type: "button", className: spacing({ p: 1 }, b('item')), "aria-label": 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: _jsx("span", { className: b('swatch', {
                            none: swatch.value === NO_COLOR_VALUE,
                            color: swatch.value || undefined,
                        }), children: isSelected && (_jsx("span", { className: b('check'), children: _jsx(Icon, { data: Check, size: 16 }) })) }) }) }, swatch.value));
        }) }));
};
//# sourceMappingURL=CellBgPalette.js.map
