import {
	kindFilter,
	showOnlyTracked,
	track,
} from "./modules/common/mat-kind-filter.js";

document.addEventListener("DOMContentLoaded", (event) => {
	const recipes = document.querySelectorAll(".recipe");

	for (const recipe of recipes) {
		recipe.checked =
			localStorage.getItem("kh1-synth-" + recipe.id) === "true" ?? false;
		update_synth_completions(recipe);

		recipe.addEventListener("input", function () {
			localStorage.setItem("kh1-synth-" + this.id, this.checked);
			update_synth_completions(this);
			calc_total_ingredients();
		});
	}

	calc_total_ingredients();
});

function update_synth_completions(recipe) {
	if (recipe.checked) {
		recipe.parentElement.classList.add("complete");
	} else {
		recipe.parentElement.classList.remove("complete");
	}
}

function calc_total_ingredients() {
	const needed = new Map();
	const recipes = document.querySelectorAll(".recipe");

	for (const recipe of recipes) {
		const isComplete = recipe.checked;
		if (isComplete) {
			continue;
		}

		const ingredients =
			recipe.parentElement.querySelectorAll("label ul li");
		for (const ingredient of ingredients) {
			let name = ingredient.dataset["synthItemName"];
			let amount = Number(ingredient.dataset["synthItemAmount"]);

			if (needed.has(name)) {
				let new_amount = Number(needed.get(name)) + amount;
				needed.set(name, new_amount);
			} else {
				needed.set(name, amount);
			}
		}
	}

	const sortedMap = new Map([...needed].sort((a, b) => b[1] - a[1]));

	// generating the new list with materials needed
	const matsList = document.getElementById("mats");
	matsList.innerHTML = "<h1>Materials Needed</h1>";
	const uiList = document.createElement("ul");
	for (const entry of sortedMap) {
		const liElem = document.createElement("li");
		liElem.innerHTML = entry[0] + " x" + entry[1];
		uiList.appendChild(liElem);
	}
	matsList.appendChild(uiList);
}

Object.assign(window, { track });