import { jsx as _jsx } from "react/jsx-runtime";
import * as React from 'react';
import { Stop } from '@gravity-ui/icons';
import { useMainEditorStore } from "../../hooks/useMainEditorStore.js";
import { editorCn } from "../../utils/cn.js";
import './BigOverlay.css';
const b = editorCn('big-overlay');
const BigOverlay = ({ className }) => {
    const { manipulateOverlayMode } = 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 (_jsx("div", { ref: overlayRef, className: b(null, className), children: mousePosition && manipulateOverlayMode ? (_jsx("div", { className: b('border'), style: {
                top: mousePosition.y,
                left: mousePosition.x,
            }, children: _jsx(Stop, { height: 20, width: 20 }) })) : null }));
};
export default BigOverlay;
//# sourceMappingURL=BigOverlay.js.map
