function calculateTotal() {
	let baseFee = 0;
	if(currentCustomerType == "newTeam"){
		baseFee = 80000;
	} else if(currentCustomerType == "newPlayer") {
		baseFee = 20000;
	} else if(currentCustomerType == "existingCustomer") {
		baseFee = 0;
	} else if(currentCustomerType == "patron") {
		baseFee = 0;
	}
	
	let fee = 0;
	for(let product of products) {
		let quantityDiv = product.querySelector(".product-element.unit-counter");
		
		let quantity = parseInt(quantityDiv.innerText);
		let price    = parseInt(product.getAttribute("price")) * 100;
		
		fee += quantity * price;
	}
	
	total.setAttribute("total", (baseFee + fee));
	total.innerText = "$" + ((baseFee + fee) / 100).toFixed(2);
}

function generateProductsPanel(products) {
	
	let productList = [];

	let groups = {"Team": false, "Tickets": false, "Merch": false};
	
	for(const product of products) {
		if(product.group != null) {
			groups[product.group] = true;
		}
	}
	
	for(let group in groups) {
		if(groups[group] == true) {
			const groupDiv = document.createElement("div");
			groupDiv.id = "group_" + group;
			groupDiv.classList.add("product-group");
			groupDiv.innerText = group;
			
			productPanel.append(groupDiv);
		}
	}
	
	for(const product of products) {
	
		if(product.backendProduct == true) {
			backendProducts[product.handle] = product.squareId;
			continue;
		}
	
		const productDiv = document.createElement("div");
		productDiv.id = "product_" + product.handle;
		
		productDiv.classList.add("product");
		productDiv.classList.add(product.group.toLowerCase() + "-record");
		
		productDiv.setAttribute (       "price", product.price		);
		productDiv.setAttribute (    "capacity", product.capacity   );
		productDiv.setAttribute ("team-product", product.teamProduct);
		productDiv.setAttribute (      "handle", product.handle     );
		productDiv.setAttribute (   "square-id", product.squareId   );
		
		let productHtml =  `<img src="${product.img}" class="product-element product-image"></img>
							<div class="product-element product-title">${product.name}</div>
							<div class="product-element quantizer">
								<div class="product-element decrement-button button-disabled ${product.group.toLowerCase()}">-</div>
								<div class="product-element unit-counter" capacity=${product.capacity}>0</div>
								<div class="product-element increment-button ${product.group.toLowerCase()}">+</div>
							</div>
							<div class="product-element product-price">$${product.price}</div>
							<div class="product-element description-button ${product.group.toLowerCase()}">?<div class="product-description">${product.description}</div></div>`
						   
		productDiv.innerHTML = productHtml;
		
		const unitCounter = productDiv.getElementsByClassName("unit-counter")[0];
		const decrementer = productDiv.getElementsByClassName("decrement-button")[0];
		const incrementer = productDiv.getElementsByClassName("increment-button")[0];
	
		decrementer.addEventListener('click', e => {
			e.preventDefault()
			if(!decrementer.classList.contains("button-disabled")){
				adjustUnits(-1);
			}
		});
		
		incrementer.addEventListener('click', e => {
			e.preventDefault()
			if(!incrementer.classList.contains("button-disabled")){
				adjustUnits(1);
			}
		});
		
		function adjustUnits (unitsToAdjust) {
			let units = parseInt(unitCounter.innerText) + unitsToAdjust;
			unitCounter.innerText = units;
			
			if(units == 0) {
				decrementer.classList.add("button-disabled");
				incrementer.classList.remove("button-disabled");
				unitCounter.classList.remove("bold");
			} else {
				unitCounter.classList.add("bold");
				decrementer.classList.remove("button-disabled");
				if(units < parseInt(unitCounter.getAttribute("capacity"))) {
					incrementer.classList.remove("button-disabled");
				} else {
					incrementer.classList.add("button-disabled");
				}
			}
			
			calculateTotal();
		}
		
		const groupDiv = document.getElementById("group_" + product.group);
		
		groupDiv.append(productDiv);
		
		productList.push(productDiv);
	}
	
	return productList;
}

function appendPreviousPurchaserOptions(purchasers) {

	for(let purchaser of purchasers) {
		let purchaserName = purchaser.customer;
		
		let option = document.createElement('option');
		option.value = purchaserName;
		option.innerHTML = purchaserName;
		previousPurchaserSelector.appendChild(option);
		
		customers[purchaserName] = purchaser.items;
	}
	
	customers["(select)"] = {};
	
}

function initiateCheckout() {
	
	checkoutButton.innerText = "Loading..."
	
	let body = {};
	let items = [];
	
	for(let product of products) {
		const unitCounter = product.getElementsByClassName("unit-counter")[0];
		let units = parseInt(unitCounter.innerText);
		
		if(units > 0) {
			let item = {
				"catalog_object_id": product.getAttribute("square-id"),
				"quantity": String(units),
				"metadata": {
					"sku": product.getAttribute("handle")
				}
			}

			items.push(item);
		}
	}
	
	if(currentCustomerType == "newTeam"){
		let players = player1.value + "\n"
					+ player2.value + "\n"
					+ player3.value + "\n"
					+ player4.value;
	
		items.push({"catalog_object_id": backendProducts.teamEntry, "quantity": "1", "note": players, "metadata": {"sku": "teamEntry"}});
		items.push({"catalog_object_id": backendProducts.dinnerTicket, "quantity": "4", "base_price_money": {"amount": 0, "currency": "USD"}, "metadata": {"sku": "dinnerTicket"}});
		body.customer_id = teamName.value;
	} else if(currentCustomerType == "newPlayer") {
		items.push({"catalog_object_id": backendProducts.singlePlayerTicket, "quantity": "1", "metadata": {"sku": "singlePlayerTicket"}});
		items.push({"catalog_object_id": backendProducts.dinnerTicket, "quantity": "1", "base_price_money": {"amount": 0, "currency": "USD"}, "metadata": {"sku": "dinnerTicket"}});
		body.customer_id = personName.value;
	} else if(currentCustomerType == "patron") {
		body.customer_id = personName.value;
	} else {
		body.customer_id = previousPurchaserSelector.options[previousPurchaserSelector.selectedIndex].value;
	}
	
	body.metadata = {"type": currentCustomerType, "name": body.customer_id};
	body.items = items;
	
	fetch('https://5czhapgl7ci2pq225tsx7dsyeq0kfvlr.lambda-url.us-east-2.on.aws/', {
		method: 'POST',
		body  : JSON.stringify(body)
	}).then(response => response.json())
      .then(response => {handleResponse(response)});
	  
	function handleResponse(response) {
		setTimeout(function(){
			if(response.payment_link != null) {
				window.location.href = response.payment_link.url;
			} else {
				checkoutButton.innerText = "Secure Checkout"
			}
		}, 1000);
	}
}

function updateCapacities() {
	let currentCustomerItems = customers[previousPurchaserSelector.options[previousPurchaserSelector.selectedIndex].value];

	console.log(JSON.stringify(currentCustomerItems));

	for(product of products) {
		const unitCounter = product.getElementsByClassName("unit-counter")[0];
		const decrementer = product.getElementsByClassName("decrement-button")[0];
		const incrementer = product.getElementsByClassName("increment-button")[0];
		if(currentCustomerType == "existingCustomer" && currentCustomerItems != null && currentCustomerItems.hasOwnProperty(product.getAttribute("handle"))) {
			unitCounter.setAttribute("capacity", parseInt(product.getAttribute("capacity")) - currentCustomerItems[product.getAttribute("handle")]);
		} else {
			unitCounter.setAttribute("capacity", product.getAttribute("capacity"));
		}
		
		if(currentCustomerType == "patron" && product.getAttribute("team-product") == "true") {
			unitCounter.setAttribute("capacity", "0");
		}
		
		unitCounter.innerText = "0";
		decrementer.classList.add("button-disabled");
		if(unitCounter.getAttribute("capacity") != "0") {
			incrementer.classList.remove("button-disabled");
		} else {
			incrementer.classList.add("button-disabled");
		}
		unitCounter.classList.remove("bold");
	}
	
	calculateTotal();
}

const formPanel    = document.getElementById("form-panel");
const productPanel = document.getElementById("product-panel");

const teamCreationContainer = document.getElementById("team-creation-container");
const playerCreationContainer = document.getElementById("player-creation-container");
const teamSelectionContainer   	= document.getElementById("team-selection-container");

const newTeamButton		= document.getElementById("new-team-button");
const newPlayerButton = document.getElementById("new-player-button");
const newPatronButton = document.getElementById("new-patron-button");
const selectTeamButton  = document.getElementById("select-team-button");

const previousPurchaserSelector = document.getElementById("purchaser-selector");
const teamName   = document.getElementById("team-name-input");
const personName = document.getElementById("person-name-input");

const player1 = document.getElementById("player1");
const player2 = document.getElementById("player2");
const player3 = document.getElementById("player3");
const player4 = document.getElementById("player4");

const singlePlayerNote = document.getElementById("single-player-note");

let customers = {};
previousPurchaserSelector.addEventListener("change", e => {
	e.preventDefault()
	updateCapacities();
});

const checkoutButton = document.getElementById("checkout-button");

const total = document.getElementById("total");
let currentCustomerType = "newTeam";
let products = [];
let backendProducts = {};

let supabaseReadKey = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Indzd2p5YWppZ3B1aXVrcXR1YWlsIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzMxNjYwOTAsImV4cCI6MjA4ODc0MjA5MH0.PbZ_f-K6HJtb_IEhJcgpcYk4axPuHERW_ZNWQs3jufo";
let supaUrl = "https://wswjyajigpuiukqtuail.supabase.co/rest/v1/"
fetch(supaUrl + 'esnCupProducts2024?apikey=' + supabaseReadKey + "&order=order.asc", {
  method: 'GET',
}).then(response 	 => response.json())
  .then(productsJson => {products = generateProductsPanel(productsJson)});

fetch(supaUrl + 'esnCupCustomers2024?apikey=' + supabaseReadKey + "&order=customer.asc", {
  method: 'GET',
}).then(response 	 => response.json())
  .then(customersJson => {appendPreviousPurchaserOptions(customersJson)});

let buttons = new Map();
buttons.set(newTeamButton, teamCreationContainer);
buttons.set(newPlayerButton, playerCreationContainer);
buttons.set(newPatronButton, playerCreationContainer);
buttons.set(selectTeamButton, teamSelectionContainer);

for(let [button, container] of buttons) {
	button.addEventListener('click', e => {
		e.preventDefault()
		if(!button.classList.contains("button-selected")){
			for(let [button2, container2] of buttons) {
				button2.classList.remove("button-binary-pressed");
				container2.classList.remove("container-active");
			}
			button.classList.add("button-binary-pressed");
			container.classList.add("container-active");
		}
		
		currentCustomerType = button.getAttribute("customerType");
		if(currentCustomerType != "newPlayer") {
			singlePlayerNote.classList.add("hidden");
		} else {
			singlePlayerNote.classList.remove("hidden");
		}
		
		updateCapacities();
	});
}

let checkoutTimeout = false;
checkoutButton.addEventListener('click', e => {
	e.preventDefault()
	if(checkoutTimeout == false && previousPurchaserSelector.options[previousPurchaserSelector.selectedIndex].value != "(select)"){
		initiateCheckout();
	}
	checkoutTimeout = true;
	
	setTimeout(function(){
		checkoutTimeout = false;
    }, 5000);
});

teamCreationContainer.classList.add("container-active");
newTeamButton.classList.add("button-binary-pressed");