const blacklistedChars = /\s,/g;

let macAddressElements = [];

function saveCustomerName() {
	localStorage.setItem("customer_name", document.getElementById("customer_name").value);
	document.getElementById("customer_name").value = localStorage.getItem("customer_name")
}

function savePhoneNumber() {
	localStorage.setItem("phone_number", document.getElementById("phone_number").value);
	document.getElementById("phone_number").value = localStorage.getItem("phone_number")
}

function saveMACAddresses() {
	localStorage.setItem("mac_address", macAddressElements.map(macAddressElement => document.getElementById(macAddressElement).value).join(","));
	document.getElementById("mac_address").value = localStorage.getItem("mac_address")
}

function saveDeviceNames() {
	localStorage.setItem("device_name", macAddressElements.map(macAddressElement => document.getElementById(`${macAddressElement}_device`).value).join(","));
	document.getElementById("device_name").value = localStorage.getItem("device_name")
}

function saveIsRoaming() {
	localStorage.setItem("is_roaming", macAddressElements.map(macAddressElement => document.getElementById(`${macAddressElement}_roaming`).checked).join(","));
	document.getElementById("is_roaming").value = localStorage.getItem("is_roaming")
	setPricing()
}

function saveIsGaming() {
	localStorage.setItem("is_gaming", macAddressElements.map(macAddressElement => document.getElementById(`${macAddressElement}_gaming`).checked).join(","));
	document.getElementById("is_gaming").value = localStorage.getItem("is_gaming")
	setPricing()
}

function addMACAddress(macAddress = "", deviceName = "", isRoaming = false, isGaming = false) {
	let nextIndex = macAddressElements.length;
	let nextMacAddressElement = `mac_address_${nextIndex}`;
	while (macAddressElements.includes(nextMacAddressElement)) {
		nextIndex += 1;
		nextMacAddressElement = `mac_address_${nextIndex}`;
	}
	// const template = `
	//   <div id="${nextMacAddressElement}_container" class="w-full">
	//     <div class="join w-full mt-4">
	//       <div class="w-full flex flex-row justify-stretch">
	//         <div class="flex-grow">
	//           <input id="${nextMacAddressElement}" class="input input-bordered join-item w-full"
	//             value="${macAddress}"
	//             placeholder="00:00:00:00:00:00" oninput="validateMACAddress('${nextMacAddressElement}')"
	//             onchange="saveMACAddresses()" />
	//         </div>
	//         <div class="flex-grow">
	//           <input id="${nextMacAddressElement}_device" class="input input-bordered join-item w-full"
	//             value="${deviceName}"
	//             onchange="saveMACAddresses()" placeholder="iphone-12"
	//             onclick="fillDeviceName('${nextMacAddressElement}')" />
	//         </div>
	//       </div>
	//       <button class="indicator" onclick="event.preventDefault();removeMACAddress('${nextMacAddressElement}')">
	//         <span class="indicator-item badge badge-error">-</span>
	//       </button>
	//     </div>
	//     <div class="join align-middle mt-2">
	//       <button class="btn join-item btn-accent" onclick="event.preventDefault()">Add-ons</button>
	//       <input class="join-item btn" type="checkbox" id="${nextMacAddressElement}_roaming" onchange="saveIsRoaming()"
	//         ${isRoaming === "true" ? "checked" : ""} 
	//         aria-label="Roaming" />
	//       <input class="join-item btn" type="checkbox" id="${nextMacAddressElement}_gaming" onchange="saveIsGaming()"
	//         ${isGaming === "true" ? "checked" : ""}
	//         aria-label="Gaming" />
	//     </div>
	//   </div>`;

	let template = document.getElementById("template_container").outerHTML;
	template = template.replace(/template/g, nextMacAddressElement);
	template = template.replace(/{mac_address}/g, macAddress);
	template = template.replace(/{device_name}/g, deviceName);
	template = template.replace(/{roaming}/g, isRoaming === "true" ? "checked" : "");
	template = template.replace(/{gaming}/g, isGaming === "true" ? "checked" : "");

	// document.getElementById("mac_addresses").innerHTML += template;
	document.getElementById("mac_addresses").insertAdjacentHTML("beforeend", template)
	document.getElementById(`${nextMacAddressElement}_container`).classList.remove("hidden");
	macAddressElements.push(nextMacAddressElement)
	setPricing()
}

function removeMACAddress(id) {
	if (!macAddressElements.includes(id)) return;

	macAddressElements = macAddressElements.filter((macAddressElement) => macAddressElement !== id);
	document.getElementById(`${id}_container`).remove()

	saveMACAddresses();
	saveDeviceNames();
	saveIsGaming();
	saveIsRoaming();
}

function recoverForm() {
	const customerName = document.getElementById("customer_name");
	const phoneNumber = document.getElementById("phone_number");
	// const macAddress = document.getElementById("mac_address");
	// const deviceName = document.getElementById("device_name");
	// const isRoaming = document.getElementById("is_roaming");
	// const isGaming = document.getElementById("is_gaming");

	customerName.value = localStorage.getItem("customer_name") || "";
	phoneNumber.value = localStorage.getItem("phone_number") || "";
	// macAddress.value = localStorage.getItem("mac_address") || "";
	// deviceName.value = localStorage.getItem("device_name") || "";
	// isRoaming.value = localStorage.getItem("is_roaming") === "true";
	// isGaming.value = localStorage.getItem("is_gaming") === "true";

	const macAddresses = (localStorage.getItem("mac_address") || "").split(",");
	const deviceNames = (localStorage.getItem("device_name") || "").split(",");
	const isRoaming = (localStorage.getItem("is_roaming") || "").split(",");
	const isGaming = (localStorage.getItem("is_gaming") || "").split(",");
	macAddresses.forEach((macAddress, index) => {
		addMACAddress(macAddress, deviceNames[index], isRoaming[index], isGaming[index]);
	});
}

function saveForm() {
	saveCustomerName();
	savePhoneNumber();
	saveMACAddresses();
	saveDeviceNames();
	saveIsRoaming();
	saveIsGaming();
}

function saveHiddenForm() {
	saveMACAddresses();
	saveDeviceNames();
	saveIsRoaming();
	saveIsGaming();
}

function clearForm() {
	if (!confirm("This will remove all the data that is currently filled out. Do you want to continue?")) return;

	localStorage.removeItem("customer_name");
	document.getElementById("customer_name").value = "";
	for (const macAddressElement of macAddressElements) {
		removeMACAddress(macAddressElement)
	}
}

function setPricing() {
	const amountLabel = document.getElementById("amount");

	const amount = (normalPrice * macAddressElements.length) + (roamingPrice * document.querySelectorAll("input[id$='_roaming']:checked").length) + (gamingPrice * document.querySelectorAll("input[id$='_gaming']:checked").length);

	amountLabel.textContent = `${amount} ${currency}`;
}

function fillDeviceName(id) {
	let deviceType = "";
	const macAddress = document.getElementById(id).value;
	// now we find out which format it is
	// 35:df:61 = customerfirstname-android
	// 3A-DF-61 = customerfirstname-laptop
	// 3A:DF:61 = customerfirstname-iphone
	const macAddressRegex = new RegExp(
		/^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$/
	);
	if (macAddress === macAddress.toLowerCase()) {
		deviceType = "android";
	} else if (macAddress === macAddress.replace(/:/g, "-")) {
		deviceType = "laptop";
	} else if (macAddress === macAddress.toUpperCase()) {
		deviceType = "iphone";
	} else {
		deviceType = "phone";
	}

	const fullName = document.getElementById("customer_name").value;
	const kebabCase = fullName.split(" ")[0].toLowerCase();
	// const kebabCase = fullName.toLowerCase().replace(/\s/g, "-");
	const deviceName = `${kebabCase}-${deviceType}`.toLowerCase();

	const deviceNameInput = document.getElementById(`${id}_device`);
	if (!deviceNameInput.value) deviceNameInput.value = deviceName;

	saveDeviceNames()
}

function validateMACAddress(id) {
	var macAddress = document.getElementById(id);
	macAddress.setCustomValidity("");
	macAddress.classList.remove("input-error");
	macAddress.classList.remove("input-success");
	if (!macAddress.value || macAddress.value === "") return false;
	macAddress.value = macAddress.value.replace(blacklistedChars, ":");
	var macAddressRegex = new RegExp(
		/^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$/
	);
	const macAddressValue = macAddress.value;
	if (!macAddressRegex.test(macAddressValue)) {
		macAddress.classList.add("input-error");
		macAddress.setCustomValidity("Invalid MAC Address");
		macAddress.reportValidity();
		return false;
	}
	macAddress.classList.add("input-success");
	macAddress.reportValidity();
	fillDeviceName(id);
	return true;
}

function validateDeviceName(id) {
	const deviceName = document.getElementById(`${id}_device`);
	deviceName.value = deviceName.value.toLowerCase().replace(blacklistedChars, "-")
	deviceName.setCustomValidity("");
	deviceName.classList.remove("input-error");
	deviceName.classList.remove("input-success");

	// any custom validation

	deviceName.classList.add("input-success");
	return true;
}

function validateForm() {
	const macAddressValid = macAddressElements.map(macAddressElement => validateMACAddress(macAddressElement)).every(r => r === true);
	const customerName = document.getElementById("customer_name");
	customerName.classList.remove("input-error");
	// customerName.setCustomValidity("");
	const deviceName = document.getElementById("device_name");
	deviceName.classList.remove("input-error");
	// deviceName.setCustomValidity("");
	const transferReceipt = document.getElementById("transfer_receipt");
	transferReceipt.classList.remove("input-error");
	// transferReceipt.setCustomValidity("");

	if (customerName.value === "") {
		customerName.classList.add("input-error");
		// customerName.setCustomValidity("Customer Name is required");
		// customerName.reportValidity();
	}

	if (deviceName.value === "") {
		deviceName.classList.add("input-error");
		// deviceName.setCustomValidity("Device Name is required");
		// deviceName.reportValidity();
	}

	if (transferReceipt.files.length === 0) {
		transferReceipt.classList.add("input-error");
		// transferReceipt.setCustomValidity("Transfer Receipt is required");
		// transferReceipt.reportValidity();
	}

	saveForm();

	return (
		macAddressValid &&
		customerName.value !== "" &&
		deviceName.value !== "" &&
		transferReceipt.files.length > 0
	);
}

window.onload = () => {
	recoverForm();
	setPricing();
};