import "leaflet.polylinemeasure";
import "leaflet.polylinemeasure/Leaflet.PolylineMeasure.css";
import { useEffect, useRef } from "react";
import { useMap } from "react-leaflet";
import L from "leaflet";

export const DistanceLayer = () => {
	const map = useMap();
	const added = useRef(false);
	useEffect(() => {
		if (added.current) return;
		// eslint-disable-next-line @typescript-eslint/no-explicit-any
		(L.control as any)
			.polylineMeasure({
				position: "topleft",
				unit: "metres", // Show imperial or metric distances. Values: 'metres', 'landmiles', 'nauticalmiles'
				clearMeasurementsOnStop: true, // Clear all the measurements when the control is unselected
				showBearings: true, // Whether bearings are displayed within the tooltips
				bearingTextIn: "In", // language dependend label for inbound bearings
				bearingTextOut: "Out", // language dependend label for outbound bearings
				tooltipTextFinish: "Klicken zum <b>Beenden</b><br>",
				tooltipTextDelete: "SHIFT+Click zum <b>Löschen</b>",
				tooltipTextMove: "Klicken und ziehen zum <b>Verschieben</b><br>",
				tooltipTextResume: "<br>CTRL+Click zum <b>Forsetzen</b>",
				tooltipTextAdd: "CTRL+Click zum <b>Hinzufügen</b>",
				// language dependend labels for point's tooltips
				measureControlTitleOn: "Messung starten", // Title for the control going to be switched on
				measureControlTitleOff: "Messung beenden", // Title for the control going to be switched off
				measureControlLabel: "&#128207", // Label of the Measure control (maybe a unicode symbol)
				measureControlClasses: ["pointer"], // Classes to apply to the Measure control
				showClearControl: true, // Show a control to clear all the measurements
				clearControlTitle: "Messung löschen", // Title text to show on the clear measurements control button
				clearControlLabel: "&times", // Label of the Clear control (maybe a unicode symbol)
				clearControlClasses: ["pointer"], // Classes to apply to clear control button
				unitControlClasses: ["pointer"],
				showUnitControl: true, // Show a control to change the units of measurements
				unitControlTitle: {
					// Title texts to show on the Unit Control
					text: "Einheit ändern",
					kilometres: "Kilometer",
					nauticalmiles: "Nautische Meilen",
				},
				unitControlLabel: {
					// Unit symbols to show in the Unit Control and measurement labels
					metres: "m",
					kilometres: "km",
					feet: "ft",
					landmiles: "mi",
					nauticalmiles: "nm",
				},
				tempLine: {
					// Styling settings for the temporary dashed line
					color: "#00f", // Dashed line color
					weight: 2, // Dashed line weight
				},
				fixedLine: {
					// Styling for the solid line
					color: "#006", // Solid line color
					weight: 2, // Solid line weight
				},
				arrow: {
					// Styling of the midway arrow
					color: "#000", // Color of the arrow
				},
				startCircle: {
					// Style settings for circle marker indicating the starting point of the polyline
					color: "#000000", // Color of the border of the circle
					weight: 1, // Weight of the circle
					fillColor: "#000000", // Fill color of the circle
					fillOpacity: 1, // Fill opacity of the circle
					radius: 3, // Radius of the circle
				},
				intermedCircle: {
					// Style settings for all circle markers between startCircle and endCircle
					color: "#000", // Color of the border of the circle
					weight: 1, // Weight of the circle
					fillColor: "#000000", // Fill color of the circle
					fillOpacity: 1, // Fill opacity of the circle
					radius: 3, // Radius of the circle
				},
				currentCircle: {
					// Style settings for circle marker indicating the latest point of the polyline during drawing a line
					color: "#000000", // Color of the border of the circle
					weight: 1, // Weight of the circle
					fillColor: "#FFFFFF", // Fill color of the circle
					fillOpacity: 1, // Fill opacity of the circle
					radius: 3, // Radius of the circle
				},
				endCircle: {
					// Style settings for circle marker indicating the last point of the polyline
					color: "#000", // Color of the border of the circle
					weight: 1, // Weight of the circle
					fillColor: "#ffffff", // Fill color of the circle
					fillOpacity: 1, // Fill opacity of the circle
					radius: 3, // Radius of the circle
				},
			})
			.addTo(map);
		added.current = true;
	}, [map]);
	return null;
};