"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from "react";
import { Marker, Popup, Tooltip } from "react-leaflet";
import MarkerClusterGroup from "react-leaflet-cluster";
import MarkerForm from "./marker-form";
import MarkerPopup from "./marker-popup";
import { createMarkerIcon } from "./utils/marker-icon";
import { identifyLayer, MARKER_SHAPE } from "./utils/shapes";
export default function Markers({ markers, ...props }) {
    const items = markers.map((marker) => (_jsx(MapMarker, { marker: marker, ...props }, marker.id)));
    if (props.isEditing) {
        return items;
    }
    return (_jsx(MarkerClusterGroup, { maxClusterRadius: 20, disableClusteringAtZoom: 16, chunkedLoading: true, children: items }));
}
function MapMarker({ marker, setMarkers, isEditing, onLayerChange, }) {
    const popupRef = React.useRef(null);
    const { id, title, position, tooltipOpened } = marker;
    const registerLayer = (layer) => {
        if (!layer) {
            return;
        }
        const layerChanged = () => onLayerChange(layer);
        identifyLayer(layer, id, MARKER_SHAPE);
        layer.on("pm:dragend", layerChanged);
        return () => {
            layer.off("pm:dragend", layerChanged);
        };
    };
    return (_jsxs(Marker, { ref: registerLayer, position: position, draggable: false, icon: createMarkerIcon(), children: [!isEditing && (_jsx(Tooltip, { direction: "right", permanent: tooltipOpened, children: title })), _jsx(Popup, { ref: popupRef, children: isEditing ? (_jsx(MarkerForm, { popupRef: popupRef, marker: marker, setMarkers: setMarkers })) : (_jsx(MarkerPopup, { marker: marker })) })] }));
}
