import { useEffect, useRef } from 'react';
import { MAP_DRAWING_CROSSHAIR_CURSOR } from './useDrawingCursors';
var createVertexHandleElement = function (isFirstHandle) {
    var el = document.createElement('div');
    el.style.width = '10px';
    el.style.height = '10px';
    el.style.borderRadius = '50%';
    el.style.boxSizing = 'border-box';
    el.style.backgroundColor = '#ffffff';
    el.style.border = '1.25px solid #444444';
    el.style.cursor = isFirstHandle ? 'pointer' : MAP_DRAWING_CROSSHAIR_CURSOR;
    el.style.transform = 'translateY(50%)';
    return el;
};
/**
 * N circular vertex markers. The first is clickable to close the ring; others swallow clicks to avoid
 * double map-handling.
 */
export var useVertexHandles = function (_a) {
    var map = _a.map, isActive = _a.isActive, vertices = _a.vertices, handleZIndexRef = _a.handleZIndexRef, onFirstHandleClick = _a.onFirstHandleClick, syncDisposeRef = _a.syncDisposeRef;
    var markersRef = useRef([]);
    var onFirstHandleClickRef = useRef(onFirstHandleClick);
    onFirstHandleClickRef.current = onFirstHandleClick;
    var dispose = function () {
        markersRef.current.forEach(function (m) {
            google.maps.event.clearInstanceListeners(m);
            m.map = null;
        });
        markersRef.current = [];
    };
    useEffect(function () {
        if (!map || !isActive) {
            syncDisposeRef.current = function () {
                dispose();
            };
            dispose();
            return function () {
                syncDisposeRef.current = function () { };
            };
        }
        syncDisposeRef.current = dispose;
        return function () {
            syncDisposeRef.current = function () { };
            dispose();
        };
    }, [map, isActive, syncDisposeRef]);
    useEffect(function () {
        if (!map || !isActive || typeof document === 'undefined') {
            return;
        }
        if (vertices.length === 0) {
            dispose();
            return;
        }
        var handleZ = handleZIndexRef.current;
        var AdvancedMarkerElement = google.maps.marker.AdvancedMarkerElement;
        for (var i = markersRef.current.length; i < vertices.length; i += 1) {
            var latLng = vertices[i];
            if (!latLng) {
                continue;
            }
            var isFirstHandle = i === 0;
            var content = createVertexHandleElement(isFirstHandle);
            var marker = new AdvancedMarkerElement({
                map: map,
                position: latLng,
                content: content,
                zIndex: handleZ + (isFirstHandle ? 1 : 0),
                gmpClickable: true
            });
            if (isFirstHandle) {
                google.maps.event.addListener(marker, 'click', function (e) {
                    e.stop();
                    onFirstHandleClickRef.current();
                });
            }
            else {
                google.maps.event.addListener(marker, 'click', function (e) {
                    e.stop();
                });
            }
            markersRef.current.push(marker);
        }
    }, [map, isActive, vertices, handleZIndexRef]);
};
