{{ template "rmo/layout/base.html" . }}

{{ define "title" }}Report Nuisance{{ end }}
{{ define "extraheader" }}
	<style></style>
	<script
		type="text/javascript"
		src="//unpkg.com/maplibre-gl@5.0.1/dist/maplibre-gl.js"
	></script>
	<script src="/static/js/geocode.js"></script>
	<script src="/static/js/location.js"></script>
	<script src="/static/js/map-locator.js"></script>
	<script src="/static/js/photo-upload.js"></script>
	<script>
		async function handleMapClick(mapLocator, lngLat) {
			mapLocator.SetMarker(lngLat);
			mapLocator.PanTo(lngLat, { duration: 2000 });
			const response = await geocodeReverse({
				lat: lngLat.lat,
				lng: lngLat.lng,
			});
			console.log("click reverse geocode", response);
			if (response !== undefined && response.features.length > 0) {
				const addressInput = document.querySelector("address-input");
				addressInput.SetValue(response.features[0]);
			}
		}
		async function handleMarkerDrag(lngLat) {
			const response = await geocodeReverse({
				lat: lngLat.lat,
				lng: lngLat.lng,
			});
			console.log("marker drag reverse geocode", response);
			if (response !== undefined && response.features.length > 0) {
				const addressInput = document.querySelector("address-input");
				addressInput.SetValue(response.features[0]);
			}
		}
		// Check for source identification
		document.addEventListener("DOMContentLoaded", function () {
			// Elements
			const addressInput = document.querySelector("address-input");
			const latitudeInput = document.getElementById("latitude");
			const longitudeInput = document.getElementById("longitude");
			const latlngAccuracyType = document.getElementById(
				"latlng-accuracy-type",
			);
			const latlngAccuracyValue = document.getElementById(
				"latlng-accuracy-value",
			);

			const mapLocator = document.querySelector("map-locator");
			mapLocator.addEventListener("load", (event) => {
				getGeolocation({
					enableHighAccuracy: true,
					timeout: 10000,
					maximumAge: 0,
				})
					.then((position) => {
						console.log("Got location", position);
						latitudeInput.value = position.coords.latitude;
						longitudeInput.value = position.coords.longitude;
						latlngAccuracyType.value = "browser";
						latlngAccuracyValue.value = position.coords.accuracy;
						mapLocator.JumpTo({
							center: {
								lng: position.coords.longitude,
								lat: position.coords.latitude,
							},
							zoom: 14,
						});
						const coords = [
							position.coords.longitude,
							position.coords.latitude,
						];
						mapLocator.SetMarker(coords);
						mapLocator.JumpTo({ center: coords, zoom: 14 });
						handleMarkerDrag({
							lat: position.coords.latitude,
							lng: position.coords.longitude,
						});
					})
					.catch((error) => {
						console.log("location error", error);
					});
			});
			let mapZoom = document.getElementById("map-zoom");
			mapLocator.addEventListener("zoomend", function (e) {
				mapZoom.value = e.target.GetZoom();
			});
			mapLocator.addEventListener("click", (e) => {
				// We get some events without the lngLat
				if (e.detail !== undefined && e.detail.lngLat !== undefined) {
					handleMapClick(mapLocator, e.detail.lngLat);
				}
			});
			mapLocator.addEventListener("markerdragend", (e) => {
				const marker = event.detail.marker;
				const lngLat = marker.getLngLat();
				handleMarkerDrag(lngLat);
			});

			const addressDisplay = document.querySelector("address-display");
			addressInput.addEventListener("address-selected", (event) => {
				const l = event.detail.location;
				console.log("Address selected", l);
				// Center map on selected address
				mapLocator.SetMarker(l.geometry.coordinates);
				mapLocator.JumpTo({
					center: l.geometry.coordinates,
					zoom: 14,
				});
			});
			document.querySelectorAll(".source-card").forEach((card) => {
				card.style.cursor = "pointer";
				card.addEventListener("click", function (e) {
					// Don't toggle if user clicked directly on the checkbox or label
					if (e.target.type === "checkbox" || e.target.tagName === "LABEL") {
						return;
					}

					const checkbox = this.querySelector(".form-check-input");
					checkbox.checked = !checkbox.checked;

					// Trigger change event in case you have listeners on the checkbox
					checkbox.dispatchEvent(new Event("change", { bubbles: true }));
				});
			});
		});
	</script>
	<style></style>
{{ end }}