import * as storage from "../common/storage.js";

const CODES_STORAGE_NAME = "/pro-codes-sim/codes/";
const MERIT_STORAGE_NAME = "/pro-codes-sim/merit/";
const STAR_MULTIPLIER = 1.25;

let selectionAllState = false;
let stars = 0;
let totalMerit = 0;
let fightMerit = [];

document.addEventListener("DOMContentLoaded", (event) => {
	const codes = document.querySelectorAll("#codes .slot input");
	const fights = document.querySelectorAll("#fights .slot button");

	// Loading enabled codes
	for (let code of codes) {
		const hasCodeToggled =
			storage.get(CODES_STORAGE_NAME + code.id) === "true" ? true : false;
		if (hasCodeToggled) {
			// Normally the toggleCode gets called after the checkbox is checked,
			// since we don't interact with it at this point we mark it as checked manually here
			code.checked = true;
			toggleCode(code);
		}
	}

	// Loading marked fights and their merit
	for (let fight of fights) {
		const source = fight.dataset["meritSource"];
		const merit = Number(storage.get(MERIT_STORAGE_NAME + source)) ?? 0;
		if (merit > 0) {
			markFight(fight, merit);
		}
	}
});

function markFight(data, loadedMerit = 0) {
	const source = data.dataset["meritSource"];
	const enemyName = data.dataset["enemy"];
	const baseMerit = data.dataset["baseMerit"];
	const isMarked = data.dataset["marked"] === "true" ? true : false;
	const fightLabel = data.parentNode.querySelector("span");
	const isLoading = loadedMerit > 0;

	if (isMarked) {
		data.dataset["marked"] = false;
		totalMerit -= fightMerit[source];
		updateMeritCounter();
		fightMerit[source] = 0;

		storage.remove(MERIT_STORAGE_NAME + source);

		data.innerText = "Mark";
		data.classList.remove("danger");
		fightLabel.innerText = enemyName;
	} else {
		let merit = isLoading
			? loadedMerit
			: baseMerit * (stars * STAR_MULTIPLIER);
		data.dataset["marked"] = true;
		totalMerit += merit;
		updateMeritCounter();
		fightMerit[source] = merit;

		storage.set(MERIT_STORAGE_NAME + source, merit);

		data.innerText = "Unmark";
		data.classList.add("danger");
		fightLabel.innerText = enemyName + " | " + merit + " Merit";
	}
}

function toggleCode(code) {
	let codeStars = Number(code.dataset["stars"]);

	if (code.checked) {
		stars += codeStars;
		storage.set(CODES_STORAGE_NAME + code.id, true);
	} else {
		stars -= codeStars;
		selectionAllState = false;
		updateAllButton();
		storage.remove(CODES_STORAGE_NAME + code.id);
	}
	updateStarsCounter();
}

function toggleAllCodes() {
	const codes = document.querySelectorAll("#codes .slot input");

	if (!selectionAllState) {
		selectionAllState = true;
		updateAllButton();
		for (let code of codes) {
			if (code.checked) {
				continue;
			}
			code.checked = true;
			stars += Number(code.dataset["stars"]);
			storage.set(CODES_STORAGE_NAME + code.id, true);
		}
	} else {
		selectionAllState = false;
		updateAllButton();
		for (let code of codes) {
			if (!code.checked) {
				continue;
			}
			code.checked = false;
			stars -= Number(code.dataset["stars"]);
			storage.remove(CODES_STORAGE_NAME + code.id);
		}
	}

	updateStarsCounter();
}

function updateStarsCounter() {
	let counter = document.getElementById("totalStars");
	counter.innerText = "Stars: " + stars;
}

function updateMeritCounter() {
	let counter = document.getElementById("totalMerit");
	counter.innerText = "Merit: " + totalMerit;
}

function updateAllButton() {
	const btn = document.querySelector("#codes .slot button");
	if (selectionAllState) {
		btn.classList.add("danger");
	} else {
		btn.classList.remove("danger");
	}
}

Object.assign(window, { markFight, toggleCode, toggleAllCodes });