import * as L from "leaflet";
import css from "../editable-map.module.css";
export const MARKER_SHAPE = "Marker";
export const TEXT_SHAPE = "Text";
export function identifyLayer(layer, id, shapeType) {
    const identified = layer;
    identified._customId = id;
    identified._shapeType = shapeType;
    return identified;
}
export function getLayerLatLngs(layer) {
    const path = layer;
    if (typeof path.getLatLngs === "function") {
        return path.getLatLngs();
    }
    return layer.getLatLng();
}
export function drawShape(map, shape) {
    const { id, shape: shapeType, latlngs, radius, content, color } = shape;
    const options = { color, fillOpacity: 0.1 };
    const layer = createShapeLayer(shapeType, latlngs, options, radius, content);
    if (!layer) {
        return null;
    }
    layer.addTo(map);
    return identifyLayer(layer, id, shapeType);
}
function createShapeLayer(shapeType, latlngs, options, radius, content) {
    switch (shapeType) {
        case "Line":
            return L.polyline(latlngs, options);
        case "Rectangle":
            return L.rectangle(latlngs, options);
        case "Polygon":
            return L.polygon(latlngs, options);
        case "Circle":
            return L.circle(latlngs, { ...options, radius });
        case TEXT_SHAPE:
            return L.marker(latlngs, {
                icon: L.divIcon({
                    className: css.shapeText,
                    html: `<div class="${css.shapeTextInner}">${escapeHtml(content || "")}</div>`,
                }),
            });
        default:
            return null;
    }
}
function escapeHtml(value) {
    return value.replace(/[&<>"']/g, (character) => ({
        "&": "&amp;",
        "<": "&lt;",
        ">": "&gt;",
        '"': "&quot;",
        "'": "&#39;",
    })[character]);
}
