"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const icons_1 = require("@gravity-ui/icons");
const React = tslib_1.__importStar(require("react"));
const postMessage_1 = require("../../../common/postMessage.js");
const iframeContext_1 = require("../../context/iframeContext/index.js");
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 { zoom, manipulateOverlayMode } = (0, useMainEditorStore_1.useMainEditorStore)();
    const { iframeElement } = React.useContext(iframeContext_1.IframeContext);
    const [mousePosition, setMousePosition] = React.useState(undefined);
    const [source, setSource] = React.useState('main');
    const onMouseUp = React.useCallback(() => {
        setMousePosition(undefined);
    }, []);
    const onIframeMouseEvent = React.useCallback((position) => {
        setMousePosition(position);
        setSource('iframe');
    }, []);
    (0, postMessage_1.usePostMessageAPIListener)('ON_MOUSE_UP', onMouseUp);
    (0, postMessage_1.usePostMessageAPIListener)('ON_MOUSE_MOVE', onIframeMouseEvent);
    React.useEffect(() => {
        const onEditorMouseEvent = (event) => {
            setMousePosition({ x: event.clientX, y: event.clientY });
            setSource('main');
        };
        document.addEventListener('mousemove', onEditorMouseEvent);
        document.addEventListener('mousedown', onEditorMouseEvent);
        return () => {
            document.removeEventListener('mousemove', onEditorMouseEvent);
            document.removeEventListener('mousedown', onEditorMouseEvent);
        };
    }, []);
    const realPositions = React.useMemo(() => {
        if (mousePosition) {
            const { x, y } = mousePosition;
            const iframeRect = iframeElement?.getClientRects().item(0);
            if (iframeRect) {
                const zoomedX = (x * zoom) / 100;
                const zoomedY = (y * zoom) / 100;
                const newX = source === 'main' ? x : zoomedX + iframeRect.x;
                const newY = source === 'main' ? y : zoomedY + iframeRect.y;
                return { x: newX, y: newY };
            }
        }
        return undefined;
    }, [mousePosition, source, iframeElement, zoom]);
    return ((0, jsx_runtime_1.jsx)("div", { className: b(null, className), children: realPositions && manipulateOverlayMode ? ((0, jsx_runtime_1.jsx)("div", { className: b('border'), style: {
                top: realPositions.y,
                left: realPositions.x,
            }, children: (0, jsx_runtime_1.jsx)(icons_1.Stop, { height: 20, width: 20 }) })) : null }));
};
exports.default = BigOverlay;
//# sourceMappingURL=BigOverlay.js.map
