import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useRef } from 'react';
import { ChevronRight, BucketPaint as ColorPalette } from '@gravity-ui/icons';
import { Icon, Menu, Popup, sp } from '@gravity-ui/uikit';
import { i18n } from "../../../../../../../i18n/yfm-table/index.js";
import { useBooleanState, useElementState } from "../../../../../../../react-utils/index.js";
import { CellBgPalette } from "../CellBgPalette/index.js";
const CLOSE_DELAY = 120;
export const CellBgMenuItem = function YfmTableCellBgMenuItem({ qa, currentCellBg, onCellBgChange, }) {
    const [anchorElement, setAnchorElement] = useElementState();
    const closeTimer = useRef(null);
    const [open, openPopup, closePopup] = useBooleanState(false);
    const cancelClose = () => {
        if (closeTimer.current) {
            clearTimeout(closeTimer.current);
            closeTimer.current = null;
        }
    };
    const scheduleClose = () => {
        cancelClose();
        closeTimer.current = setTimeout(closePopup, CLOSE_DELAY);
    };
    useEffect(() => () => cancelClose(), []);
    return (_jsxs(Menu.Item, { qa: qa, ref: setAnchorElement, iconStart: _jsx(Icon, { data: ColorPalette }), iconEnd: _jsx(Icon, { data: ChevronRight }), onClick: () => {
            cancelClose();
            openPopup();
        }, extraProps: {
            onMouseEnter: () => {
                cancelClose();
                openPopup();
            },
            onMouseLeave: scheduleClose,
        }, children: [i18n('cells.bg'), _jsx(Popup, { open: open, hasArrow: false, placement: "right-start", anchorElement: anchorElement, children: _jsx("div", { onMouseEnter: cancelClose, onMouseLeave: scheduleClose, className: sp({ p: 2 }), children: _jsx(CellBgPalette, { value: currentCellBg, onSelect: onCellBgChange }) }) })] }));
};
//# sourceMappingURL=CellBgMenuItem.js.map
