import { useCallback, useEffect, useRef } from 'react';
import { svg2CursorUrl } from '@reltio/mdm-sdk';
import { CROSSHAIR } from './crosshair.inline.svg';
import { isDomElement } from '../../helpers';
var crosshairCursorDataUrl = svg2CursorUrl(CROSSHAIR);
export var MAP_DRAWING_CROSSHAIR_CURSOR = "url(\"".concat(crosshairCursorDataUrl, "\") 7 7, crosshair");
export var useDrawingCursors = function (map, isActive) {
    var applyDrawingCursorsIfChangedRef = useRef(function () { });
    var reapplyCursors = useCallback(function () {
        applyDrawingCursorsIfChangedRef.current();
    }, []);
    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' : MAP_DRAWING_CROSSHAIR_CURSOR); };
        var applyInlineCursorOnAdvancedMarkers = function (cursor) {
            if (!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 (isDomElement(mapDiv)) {
                if (lastCursor !== cursor) {
                    lastCursor = cursor;
                    mapDiv.style.setProperty('cursor', cursor, 'important');
                }
                applyInlineCursorOnAdvancedMarkers(cursor);
            }
        };
        var applyAfterDomMutations = function () {
            if (!isDomElement(mapDiv) || moRaf !== null) {
                return;
            }
            moRaf = requestAnimationFrame(function () {
                moRaf = null;
                applyInlineCursorOnAdvancedMarkers(getCurrentCursor());
            });
        };
        var mapDomObserver = 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 (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 };
};
