"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useDrawingCursors = exports.MAP_DRAWING_CROSSHAIR_CURSOR = void 0;
var react_1 = require("react");
var mdm_sdk_1 = require("@reltio/mdm-sdk");
var crosshair_inline_svg_1 = require("./crosshair.inline.svg");
var helpers_1 = require("../../helpers");
var crosshairCursorDataUrl = (0, mdm_sdk_1.svg2CursorUrl)(crosshair_inline_svg_1.CROSSHAIR);
exports.MAP_DRAWING_CROSSHAIR_CURSOR = "url(\"".concat(crosshairCursorDataUrl, "\") 7 7, crosshair");
var useDrawingCursors = function (map, isActive) {
    var applyDrawingCursorsIfChangedRef = (0, react_1.useRef)(function () { });
    var reapplyCursors = (0, react_1.useCallback)(function () {
        applyDrawingCursorsIfChangedRef.current();
    }, []);
    (0, react_1.useEffect)(function () {
        if (!map || !isActive) {
            return undefined;
        }
        var mapDiv = map.getDiv();
        var isMapDragging = false;
        var lastCursor = '';
        var moRaf = null;
        var getCurrentCursor = function () { return (isMapDragging ? 'grabbing' : exports.MAP_DRAWING_CROSSHAIR_CURSOR); };
        var applyInlineCursorOnAdvancedMarkers = function (cursor) {
            if (!(0, helpers_1.isDomElement)(mapDiv)) {
                return;
            }
            mapDiv.querySelectorAll('gmp-advanced-marker').forEach(function (el) {
                if (el instanceof HTMLElement) {
                    el.style.setProperty('cursor', cursor, 'important');
                }
            });
        };
        var apply = function () {
            var cursor = getCurrentCursor();
            if ((0, helpers_1.isDomElement)(mapDiv)) {
                if (lastCursor !== cursor) {
                    lastCursor = cursor;
                    mapDiv.style.setProperty('cursor', cursor, 'important');
                }
                applyInlineCursorOnAdvancedMarkers(cursor);
            }
        };
        var applyAfterDomMutations = function () {
            if (!(0, helpers_1.isDomElement)(mapDiv) || moRaf !== null) {
                return;
            }
            moRaf = requestAnimationFrame(function () {
                moRaf = null;
                applyInlineCursorOnAdvancedMarkers(getCurrentCursor());
            });
        };
        var mapDomObserver = (0, helpers_1.isDomElement)(mapDiv) ? new MutationObserver(applyAfterDomMutations) : null;
        if (mapDomObserver) {
            mapDomObserver.observe(mapDiv, { childList: true, subtree: true });
        }
        var reapplyCursorsToDom = function () {
            lastCursor = '';
            apply();
        };
        applyDrawingCursorsIfChangedRef.current = reapplyCursorsToDom;
        var dragStartListener = map.addListener('dragstart', function () {
            isMapDragging = true;
            apply();
        });
        var dragEndListener = map.addListener('dragend', function () {
            isMapDragging = false;
            apply();
        });
        apply();
        return function () {
            applyDrawingCursorsIfChangedRef.current = function () { };
            if (moRaf !== null) {
                cancelAnimationFrame(moRaf);
            }
            mapDomObserver === null || mapDomObserver === void 0 ? void 0 : mapDomObserver.disconnect();
            if ((0, helpers_1.isDomElement)(mapDiv)) {
                mapDiv.querySelectorAll('gmp-advanced-marker').forEach(function (el) {
                    if (el instanceof HTMLElement) {
                        el.style.removeProperty('cursor');
                    }
                });
                mapDiv.style.removeProperty('cursor');
            }
            google.maps.event.removeListener(dragStartListener);
            google.maps.event.removeListener(dragEndListener);
        };
    }, [map, isActive]);
    return { reapplyCursors: reapplyCursors };
};
exports.useDrawingCursors = useDrawingCursors;
