// I really don't like this code but it's ok for now...

let main = true;

// Set a reference in the localStorage with the main color
window.addEventListener("load", () => {
	color = getCookie("color");

	if (color == "purple" || color == "") {
		document.documentElement.style.setProperty("--color", "var(--purple)");
		document.documentElement.style.setProperty("--background", "var(--purple-bg)");
		document.documentElement.style.setProperty("--alt", "var(--orange)");
		document.documentElement.style.setProperty("--alt-bg", "var(--orange-bg)");
		setCookie("color", "purple", 7);
		main = true;
	} else {
		document.documentElement.style.setProperty("--color", "var(--orange)");
		document.documentElement.style.setProperty("--background", "var(--orange-bg)");
		document.documentElement.style.setProperty("--alt", "var(--purple)");
		document.documentElement.style.setProperty("--alt-bg", "var(--purple-bg)");
		setCookie("color", "orange", 7);
		main = false;
	}
});

// Toggle color button
const colorButton = document.getElementById("color");
colorButton.addEventListener("click", () => {
	toggleColor();
});

function toggleColor() {
	var style = getComputedStyle(document.body);

	// get the current palette
	currentColor = style.getPropertyValue("--color");
	currentBg = style.getPropertyValue("--background");
	altColor = style.getPropertyValue("--alt");
	altBg = style.getPropertyValue("--alt-bg");

	// and swap the order
	document.documentElement.style.setProperty("--color", altColor);
	document.documentElement.style.setProperty("--background", altBg);
	document.documentElement.style.setProperty("--alt", currentColor);
	document.documentElement.style.setProperty("--alt-bg", currentBg);

	// set a reference in a cookie to share it with the generator page
	main = !main;
	setCookie("color", main ? "purple" : "orange", 7);
}