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

{{ define "title" }}Status{{ 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-or-report-suggestion.js"></script>
	<script src="/static/js/geocode.js"></script>
	<script src="/static/js/location.js"></script>
	<script src="/static/js/map-multipoint.js"></script>
	<!-- ordering matters since report table depends on time-relative -->
	<script src="/static/js/time-relative.js"></script>
	<script src="/static/js/table-report.js"></script>
<script>
var markers = [];
// Because features come from tiled vector data, feature geometries may be split
// or duplicated across tile boundaries. As a result, features may appear
// multiple times in query results.
function getUniqueFeatures(nuisances, waters, comparatorProperty) {
	const uniqueIds = new Set();
	const uniqueFeatures = [];
	for (const feature of nuisances) {
		const id = feature.properties[comparatorProperty];
		if (!uniqueIds.has(id)) {
			uniqueIds.add(id);
			let f = structuredClone(feature);
			f.type = "nuisance";
			uniqueFeatures.push(f);
		}
	}
	for (const feature of waters) {
		const id = feature.properties[comparatorProperty];
		if (!uniqueIds.has(id)) {
			uniqueIds.add(id);
			let f = structuredClone(feature);
			f.type = "water";
			uniqueFeatures.push(f);
		}
	}
	return uniqueFeatures;
}

function handleLookupFormSubmit(e) {
	const report_id = e.target.elements["address-or-report"].value.replace(/-/g, "");
	window.location = "/status/" + report_id;
	return false;
}

function maybeEnableLookupButton(e) {
	const lookupButton = document.getElementById("lookup");
	const lookupButtonTooltip = tooltipByElementId["lookup-tooltip"];
	const reportId = e.target.value.replace(/-/g, "");
	if (reportId.length == 12) {
		lookupButton.disabled = false;
		lookupButton.classList.remove("disabled");
		lookupButtonTooltip.disable()
	} else {
		lookupButton.disabled = true;
		lookupButton.classList.add("disabled");
		lookupButtonTooltip.enable()
	}
}

function onLoad() {
	const map = document.querySelector("map-multipoint");
	const checkboxNuisance = document.getElementById("checkboxNuisance");
	const checkboxWater = document.getElementById("checkboxWater");
	map.addEventListener("load", (event) => {
		map.addSource('tegola', {
			'type': 'vector',
			'tiles': [
				'{{.URL.Tegola}}maps/rmo/{z}/{x}/{y}'
			]
		});
		map.addLayer({
			'id': 'nuisance',
			'source': 'tegola',
			'source-layer': 'nuisance_location',
			'type': 'circle',
			'paint': {
				'circle-color': "#DC4535",
				'circle-radius': 7,
				'circle-stroke-width': 2,
				'circle-stroke-color': "#9C1C28"
			}
		});
		map.addLayer({
			'id': 'rmo_water',
			'paint': {
				'circle-color': "#0D6EfD",
				'circle-radius': 7,
				'circle-stroke-width': 2,
				'circle-stroke-color': "#024AB6",
			},
			'source': 'tegola',
			'source-layer': 'water_location',
			'type': 'circle',
		});
		map.on("idle", () => {
			function _addCheckboxClick(checkbox, layer_id) {
				checkbox.onclick = function(e) {
					if (checkbox.checked) {
						map.SetLayoutProperty(layer_id, "visibility", "visible");
					} else {
						map.SetLayoutProperty(layer_id, "visibility", "none");
					}
				}
			}
			_addCheckboxClick(checkboxNuisance, "nuisance");
			_addCheckboxClick(checkboxWater, "rmo_water");
			checkboxNuisance.onclick()
			checkboxWater.onclick()
		});
		function _updateReports() {
			const nuisances = map.queryRenderedFeatures({target: {layerId: 'nuisance'}});
			const waters = map.queryRenderedFeatures({target: {layerId: 'water'}});
			const nidus_nuisances = nuisances.filter((feature) => feature.source == "tegola");
			const nidus_waters = waters.filter((feature) => feature.source == "tegola");
			const uniqueFeatures = getUniqueFeatures(nidus_nuisances, nidus_waters, 'public_id');
			// Populate features for the listing overlay.
			renderReports(uniqueFeatures);
		}
		map.once("idle", _updateReports);
		map.on('moveend', _updateReports);
		getGeolocation({
			enableHighAccuracy: true,
			timeout: 10000,
			maximumAge: 0
		}).then(position => {
			map.jumpTo({
				center: {
					lng: position.coords.longitude,
					lat: position.coords.latitude,
				},
				zoom: 14,
			});
		}).catch(error => {
			console.log("location error", error);
		})
	});
	const report_table = document.querySelector('table-report');
	report_table.addEventListener("row-clicked", (e) => {
		window.location = "/status/" + e.detail.reportId;
	})
	document.querySelector("address-or-report-input").addEventListener("suggestion-selected", (e) => {
		maybeEnableLookupButton(e)
		if (e.detail.type == "address") {
			map.flyTo({
				center: {
					lng: e.detail.content.geometry.coordinates[0],
					lat: e.detail.content.geometry.coordinates[1],
				},
				zoom: 15,
			});
		}
	});
	document.querySelector("address-or-report-input").addEventListener("input", maybeEnableLookupButton);
	document.getElementById("lookup-form").addEventListener("submit", handleLookupFormSubmit);
}
function renderReports(features) {
	//console.log("render reports", features);

	const report_table = document.querySelector('table-report');
	let reports = [];
	for (const feature of features) {
		reports.push({
			address: feature.properties.address,
			created: feature.properties.created,
			id: feature.properties.public_id,
			status: feature.properties.status,
			type: feature.type,
		});
	}
	report_table.reports = reports;

	const report_count = document.getElementById("report-count");
	report_count.innerHTML = reports.length + " Reports Found";
}
document.addEventListener('DOMContentLoaded', onLoad);
</script>
{{ end }}
{{ define "content" }}
	{{ if (eq .District nil) }}
		{{ template "rmo/component/header-rmo.html" . }}
	{{ else }}
		{{ template "rmo/component/header-district.html" .District }}
	{{ end }}
{{ end }}