"use client";
import * as React from "react";
import * as L from "leaflet";
import { useLeafletContext } from "@react-leaflet/core";
import { createMarkerIcon } from "./utils/marker-icon";
import { getLayerLatLngs, identifyLayer, MARKER_SHAPE, TEXT_SHAPE, } from "./utils/shapes";
import "@geoman-io/leaflet-geoman-free";
import "@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css";
const CUSTOM_MARKER_CONTROL = "customMarker";
const NEW_MARKER = {
    title: "Nouveau point d'intérêt",
    description: "",
    url: "",
    label: "",
    tooltipOpened: false,
};
export default function Geoman({ color, setMarkers, setShapes, onLayerChange, }) {
    const { map } = useLeafletContext();
    const colorRef = React.useRef(color);
    React.useEffect(() => {
        colorRef.current = color;
        map.pm.setGlobalOptions({
            templineStyle: { color },
            hintlineStyle: { color },
            pathOptions: { color, fillOpacity: 0.1 },
        });
    }, [color, map]);
    React.useEffect(() => {
        map.pm.setLang("fr");
        map.pm.addControls({
            drawMarker: false,
            drawPolyline: true,
            drawRectangle: true,
            drawCircle: true,
            drawCircleMarker: false,
            drawPolygon: true,
            cutPolygon: false,
            rotateMode: false,
        });
        if (!map.pm.Toolbar.getButtons()[CUSTOM_MARKER_CONTROL]) {
            const { drawInstance } = map.pm.Toolbar.copyDrawControl("drawMarker", {
                name: CUSTOM_MARKER_CONTROL,
                block: "custom",
            });
            drawInstance.setOptions({ markerStyle: { icon: createMarkerIcon() } });
        }
        map.pm.Toolbar.changeControlOrder([
            CUSTOM_MARKER_CONTROL,
            "drawPolyline",
            "drawRectangle",
            "drawCircle",
            "drawPolygon",
            "drawText",
        ]);
        const layerChanged = (event) => {
            onLayerChange(event.layer);
        };
        const createShape = ({ shape, layer, }) => {
            const id = L.Util.stamp(layer);
            if (shape === CUSTOM_MARKER_CONTROL) {
                const position = layer.getLatLng();
                setMarkers((previous) => [
                    ...previous,
                    { ...NEW_MARKER, id, position },
                ]);
                layer.remove();
                return;
            }
            identifyLayer(layer, id, shape);
            layer.on("pm:dragend", layerChanged);
            layer.on("pm:edit", layerChanged);
            if (shape === TEXT_SHAPE) {
                layer.on("pm:textchange", ({ text }) => {
                    setShapes((previous) => previous.map((current) => current.id === id ? { ...current, content: text } : current));
                });
                setShapes((previous) => [
                    ...previous,
                    { id, shape, latlngs: layer.getLatLng(), content: "" },
                ]);
                return;
            }
            setShapes((previous) => [
                ...previous,
                {
                    id,
                    shape,
                    latlngs: getLayerLatLngs(layer),
                    radius: layer instanceof L.Circle ? layer.getRadius() : undefined,
                    color: colorRef.current,
                },
            ]);
        };
        const removeShape = ({ layer }) => {
            const { _customId: id, _shapeType: shapeType } = layer;
            if (id === undefined) {
                return;
            }
            if (shapeType === MARKER_SHAPE) {
                setMarkers((previous) => previous.filter((marker) => marker.id !== id));
                return;
            }
            setShapes((previous) => previous.filter((shape) => shape.id !== id));
        };
        map.on("pm:create", createShape);
        map.on("pm:remove", removeShape);
        return () => {
            map.pm.removeControls();
            map.off("pm:create", createShape);
            map.off("pm:remove", removeShape);
        };
    }, [map, onLayerChange, setMarkers, setShapes]);
    return null;
}
