let showOnlyTracked = false;
let kindFilter = new Set();

document.addEventListener("DOMContentLoaded", (event) => {
	const onlyTrackedFilter = document.querySelector(
		'input[name="onlyTracked"]',
	);

	onlyTrackedFilter.addEventListener("input", function () {
		showOnlyTracked = this.checked ? true : false;
		filter();
	});

	const kindFilters = document.querySelectorAll(
		'input[type="checkbox"][name="kindFilter"]',
	);

	kindFilters.forEach(function (item, index) {
		item.addEventListener("input", function () {
			if (this.checked) {
				kindFilter.add(this.value);
			} else {
				kindFilter.delete(this.value);
			}
			console.log(kindFilter);
			filter();
		});
	});
});

function track(element) {
	let parent = element.parentElement.parentElement;
	let isTracked = parent.dataset["isTracked"] ?? false;
	isTracked = isTracked === "true" ? false : true;
	parent.dataset["isTracked"] = isTracked;
	element.innerHTML = isTracked ? "Stop tracking" : "Start tracking";
	element.style["border-bottom-color"] = isTracked ? "#a00" : "#0a0";
	filter();
}

function filter() {
	const categories = document.querySelectorAll(".category-wrapper");

	for (const category of categories) {
		let isTracked = category.dataset["isTracked"] == "true";
		let kind = category.dataset["matKind"];
		let type = category.dataset["matType"];

		category.style.display = "";

		if (showOnlyTracked && !isTracked) {
			category.style.display = "none";
		}

		if (kindFilter.size > 0) {
			if (!kindFilter.has(kind)) {
				category.style.display = "none";
			}
		}
	}
}