var currentNumber = 0
var currentPrice = 0
var currentLabel = ''
var stationsItems;
var currentStation;
var intv = null;
var curTest = 30;

function switchStation(stNumber, stPrice, stName) {
	currentNumber = stNumber
	currentPrice = stPrice
	currentLabel = stName
	$("#currentStation").html(`${currentLabel}`)
	$("#currentPrice").html(`${currentPrice},-`)
	$.post('https://hp_subway/action', JSON.stringify({action: "getTime", currentStation: currentStation, currentNumber: currentNumber}), function(data) {
		console.log(data);
	});
}
$(document).ready(function() {
	window.addEventListener('message', function(event) {
		if (event.data.action == "open") {
			$(".metroPanel").fadeIn();
			currentStation = event.data.currentNumber
			for (const [key, value] of Object.entries(event.data.station)) {
				myElement = `
					<div class="stationBtn" onclick="switchStation(${value.stationNumber}, ${value.price}, \'${value.name}\')">
						<div class="ticketIcon">
							<i class="fas fa-ticket-alt"></i>
						</div>
						<div class="ticketDescription">
							<p class="stationBtnName">${value.stationNumber}. ${value.name}</p>
							<div class="oneLine">
								<p class="stationBtnPrice">`
					if (value.stationNumber == currentStation) {
						myElement = myElement + `<p class="priceBtn" style="margin-top: 5px;"><i class="fas fa-map-marker-alt"></i> Denne station</p>`
					} else {
						myElement = myElement + `Price: <p class="priceBtn">${value.price},-</p>`
					}
					myElement = myElement + `
								</div>
							</div>
						</div>
					</div>`
				$(".stationButtons").append(myElement)
			}
			$("#currentStation").html(`Intet stop valgt`)
			$("#currentPrice").html(`0,-`)
		} else if (event.data.action == "enter") {
			$(".timerPanel").fadeIn();
			if(intv) { clearInterval(intv);  }
           		intv = setInterval(() => {
           		    curTest = curTest - 1;
					if (curTest > 1) {
           		    	$("#timer").html(`${curTest} sekunder til næste stop..`);
					} else if (curTest == 1) {
						$("#timer").html(`${curTest} sekund til næste stop..`);
					} else {
						$("#timer").html(`Du er ankommet til stationen.`);
					}
           		}, 1000);
		} else if (event.data.action == "exit") {
			$(".timerPanel").fadeOut();
			clearInterval(intv)
			$("#timer").html(``);
			$.post('https://hp_subway/action', JSON.stringify({action: "close"}));
		}
	});

	document.onkeyup = function(data) {
		if (data.which == 27) {
			$(".metroPanel").fadeOut();
			$(".stationButtons").empty();
			$.post('https://hp_subway/action', JSON.stringify({action: "close"}));
		}
	};

	$(document).on('click', ".buyButton", function() {
		if (currentNumber != currentStation) {
			$(".metroPanel").fadeOut();
			$(".stationButtons").empty();
			$.post('https://hp_subway/action', JSON.stringify({action: "transport", station: currentNumber}));
		}
	});
});