let charFilter = "";
let typeFilter = "";
let searchType = "commands";

document.addEventListener("DOMContentLoaded", (event) => {
	const searchFilter = document.getElementById("filter");
	let filterHandler = debounce(() => filter());
	searchFilter.addEventListener("keyup", filterHandler);
	searchFilter.placeholder = "Search commands...";

	const searchInputs = document.querySelectorAll(
		'input[type="radio"][name="search"]',
	);

	searchInputs.forEach(function (item, index) {
		item.addEventListener("input", function () {
			searchType = this.checked ? this.value : "";
			searchFilter.placeholder = "Search " + this.value + "...";
			filter();
		});
	});

	const charFilters = document.querySelectorAll(
		'input[type="radio"][name="charFilter"]',
	);

	charFilters.forEach(function (item, index) {
		item.addEventListener("input", function () {
			charFilter = this.checked ? this.value : "";
			filter();
		});
	});

	const typeFilters = document.querySelectorAll(
		'input[type="radio"][name="typeFilter"]',
	);

	typeFilters.forEach(function (item, index) {
		item.addEventListener("input", function () {
			typeFilter = this.checked ? this.value : "";
			filter();
		});
	});
});

function filter() {
	const table = document.querySelector("table tbody");
	const search = document.getElementById("filter").value.toLowerCase();

	for (const child of table.children) {
		const tds = child.children;
		resetStyle(child, tds);

		if (search.length > 0) {
			if (searchType === "commands") {
				// Check for command name
				if (!tds[1].innerText.toLowerCase().includes(search)) {
					child.style.display = "none";
				} else {
					applyStyle(tds[1]);
				}
			} else if (searchType === "ingredients") {
				// Ingredients
				if (!tds[2].innerText.toLowerCase().includes(search)) {
					if (!tds[3].innerText.toLowerCase().includes(search)) {
						child.style.display = "none";
					} else {
						applyStyle(tds[3]);
					}
				} else {
					applyStyle(tds[2]);
					if (tds[3].innerText.toLowerCase().includes(search)) {
						applyStyle(tds[3]);
					}
				}
			} else if (searchType === "abilities") {
				// Abilities
				hasLine = false;
				for (let i = 0; i < 7; i++) {
					const id = i + 6;
					const ablName = tds[id].innerText.toLowerCase();
					if (ablName.includes(search)) {
						applyStyle(tds[id]);
						hasLine = true;
						break;
					}
				}

				if (!hasLine) {
					child.style.display = "none";
				}
			}
		}

		const typeCheck = typeFilter === "" || tds[1].className === typeFilter;
		const charCheck =
			charFilter === "" || child.className.includes(charFilter);

		if (child.style.display == "" && (!typeCheck || !charCheck)) {
			child.style.display = "none";
		}
	}
}

function resetStyle(child, tds) {
	child.style.display = "";
	for (const td of tds) {
		td.style.fontWeight = "inherit";
		td.style.color = "#fff";
	}
}

function applyStyle(el) {
	el.style.fontWeight = "bold";
	el.style.color = "red";
}