"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CellBgMenuItem = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const icons_1 = require("@gravity-ui/icons");
const uikit_1 = require("@gravity-ui/uikit");
const yfm_table_1 = require("../../../../../../../i18n/yfm-table/index.js");
const react_utils_1 = require("../../../../../../../react-utils/index.js");
const CellBgPalette_1 = require("../CellBgPalette/index.js");
const CLOSE_DELAY = 120;
const CellBgMenuItem = function YfmTableCellBgMenuItem({ qa, currentCellBg, onCellBgChange, }) {
    const [anchorElement, setAnchorElement] = (0, react_utils_1.useElementState)();
    const closeTimer = (0, react_1.useRef)(null);
    const [open, openPopup, closePopup] = (0, react_utils_1.useBooleanState)(false);
    const cancelClose = () => {
        if (closeTimer.current) {
            clearTimeout(closeTimer.current);
            closeTimer.current = null;
        }
    };
    const scheduleClose = () => {
        cancelClose();
        closeTimer.current = setTimeout(closePopup, CLOSE_DELAY);
    };
    (0, react_1.useEffect)(() => () => cancelClose(), []);
    return ((0, jsx_runtime_1.jsxs)(uikit_1.Menu.Item, { qa: qa, ref: setAnchorElement, iconStart: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.BucketPaint }), iconEnd: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.ChevronRight }), onClick: () => {
            cancelClose();
            openPopup();
        }, extraProps: {
            onMouseEnter: () => {
                cancelClose();
                openPopup();
            },
            onMouseLeave: scheduleClose,
        }, children: [(0, yfm_table_1.i18n)('cells.bg'), (0, jsx_runtime_1.jsx)(uikit_1.Popup, { open: open, hasArrow: false, placement: "right-start", anchorElement: anchorElement, children: (0, jsx_runtime_1.jsx)("div", { onMouseEnter: cancelClose, onMouseLeave: scheduleClose, className: (0, uikit_1.sp)({ p: 2 }), children: (0, jsx_runtime_1.jsx)(CellBgPalette_1.CellBgPalette, { value: currentCellBg, onSelect: onCellBgChange }) }) })] }));
};
exports.CellBgMenuItem = CellBgMenuItem;
//# sourceMappingURL=CellBgMenuItem.js.map
