"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const icons_1 = require("@gravity-ui/icons");
const useMainEditorStore_1 = require("../../hooks/useMainEditorStore.js");
const cn_1 = require("../../utils/cn.js");
const b = (0, cn_1.editorCn)('big-overlay');
const BigOverlay = ({ className }) => {
    const { manipulateOverlayMode } = (0, useMainEditorStore_1.useMainEditorStore)();
    const [mousePosition, setMousePosition] = React.useState(undefined);
    const overlayRef = React.useRef(null);
    React.useEffect(() => {
        const onMouseMove = (event) => {
            const rect = overlayRef.current?.getBoundingClientRect();
            setMousePosition({
                x: event.clientX - (rect?.left ?? 0),
                y: event.clientY - (rect?.top ?? 0),
            });
        };
        const onMouseUp = () => {
            setMousePosition(undefined);
        };
        document.addEventListener('mousemove', onMouseMove);
        document.addEventListener('mousedown', onMouseMove);
        document.addEventListener('mouseup', onMouseUp);
        return () => {
            document.removeEventListener('mousemove', onMouseMove);
            document.removeEventListener('mousedown', onMouseMove);
            document.removeEventListener('mouseup', onMouseUp);
        };
    }, []);
    return ((0, jsx_runtime_1.jsx)("div", { ref: overlayRef, className: b(null, className), children: mousePosition && manipulateOverlayMode ? ((0, jsx_runtime_1.jsx)("div", { className: b('border'), style: {
                top: mousePosition.y,
                left: mousePosition.x,
            }, children: (0, jsx_runtime_1.jsx)(icons_1.Stop, { height: 20, width: 20 }) })) : null }));
};
exports.default = BigOverlay;
//# sourceMappingURL=BigOverlay.js.map
