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

{{ define "title" }}Report Standing Water{{ end }}
{{ define "extraheader" }}
	<script
		type="text/javascript"
		src="//unpkg.com/maplibre-gl@5.0.1/dist/maplibre-gl.js"
	></script>
	<script src="/static/js/address-suggestion.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]);
				setLocationInputs(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]);
				setLocationInputs(response.features[0]);
			}
		}
		function setLocationInputs(location) {
			let country = document.getElementById("address-country");
			let latitude = document.getElementById("latitude");
			let longitude = document.getElementById("longitude");
			let latlngAccuracyType = document.getElementById("latlng-accuracy-type");
			let latlngAccuracyValue = document.getElementById(
				"latlng-accuracy-value",
			);
			let number = document.getElementById("address-number");
			let postalcode = document.getElementById("address-postalcode");
			let locality = document.getElementById("address-locality");
			let region = document.getElementById("address-region");
			let street = document.getElementById("address-street");

			// Extract context data from properties
			const props = location.properties;
			const context = props.context || {};

			// Populate structured fields
			country.value = context.iso_3166_a3;
			latitude.value = location.geometry.coordinates[1];
			longitude.value = location.geometry.coordinates[0];
			latlngAccuracyType.value = props.precision || 0;
			latlngAccuracyValue.value = props.distance || 0;
			number.value = props.address_components?.number ?? "";
			postalcode.value = props.address_components?.postal_code ?? "";
			locality.value = context.whosonfirst?.locality?.name ?? "";
			region.value = context.whosonfirst?.region?.abbreviation ?? "";
			street.value = props.address_components?.street ?? "";
		}
		function toggleCollapse(something) {
			el = document.getElementById(something);
			if (el.classList.contains("collapse")) {
				el.classList.remove("collapse");
			} else {
				el.classList.add("collapse");
			}
			document
				.getElementById("toggle-additional")
				.classList.add("visually-hidden");
		}

		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,
				});

				setLocationInputs(l);
			});
		});
	</script>
{{ end }}