class ManageViewController extends ViewController {
	viewDidLoad() {
		this.statusTooltip = Tooltip.createTooltip();
	}

	viewWillAppear() {
		ReservationManager.loadReservations(this.onReservationsLoaded.bind(this));
	}

	onReservationsLoaded() {
		this.refreshList();
	}

	refreshList() {
		//Remove the existing entries.
		while (this.reservationList.children.length > 0) {
			this.reservationList.removeChild(this.reservationList.children[0]);
		}

		//Add the reservations.
		for (var i = 0; i < ReservationManager.reservations.length; i++) {
			var reservation = ReservationManager.reservations[i];

			var reservationItem = document.createElement("DIV");
			reservationItem.className = "reservation-list-item";

			var leftArea = document.createElement("DIV");
			leftArea.className = "left-area";
			reservationItem.appendChild(leftArea);

			var nameLabel = document.createElement("SPAN");
			nameLabel.className = "name-label";
			nameLabel.innerText = reservation.name;
			leftArea.appendChild(nameLabel);

			var destinationLabel = document.createElement("SPAN");
			destinationLabel.className = "destination-label";
			destinationLabel.innerText = "Nach " + reservation.destination;
			leftArea.appendChild(destinationLabel);

			var descriptionLabel = document.createElement("SPAN");
			descriptionLabel.className = "description-label";
			descriptionLabel.innerText = reservation.description;
			leftArea.appendChild(descriptionLabel);

			var rightArea = document.createElement("DIV");
			rightArea.className = "right-area";
			reservationItem.appendChild(rightArea);

			var dateLabel = document.createElement("SPAN");
			dateLabel.className = "date-label";
			dateLabel.innerHTML = "Von " + this.formatDate(reservation.fromdate) + "<br>bis " + this.formatDate(reservation.todate);
			rightArea.appendChild(dateLabel);

			var trafficLight = document.createElement("DIV");
			trafficLight.className = "traffic-light" + (reservation.status == 1 ? " yellow" : " green");
			rightArea.appendChild(trafficLight);

			var redLight = document.createElement("DIV");
			redLight.className = "red light";
			redLight.addEventListener("click", this.onRedLightPressed.bind(this));
			redLight.addEventListener("mouseenter", this.onTrafficLightMouseEnter.bind(this));
			redLight.addEventListener("mouseleave", this.onTrafficLightMouseLeave.bind(this));
			redLight.setAttribute("reservation-id", reservation.reservationid);
			trafficLight.appendChild(redLight);

			var yellowLight = document.createElement("DIV");
			yellowLight.className = "yellow light";
			yellowLight.addEventListener("click", this.onYellowLightPressed.bind(this));
			yellowLight.addEventListener("mouseenter", this.onTrafficLightMouseEnter.bind(this));
			yellowLight.addEventListener("mouseleave", this.onTrafficLightMouseLeave.bind(this));
			yellowLight.setAttribute("reservation-id", reservation.reservationid);
			trafficLight.appendChild(yellowLight);

			var greenLight = document.createElement("DIV");
			greenLight.className = "green light";
			greenLight.addEventListener("click", this.onGreenLightPressed.bind(this));
			greenLight.addEventListener("mouseenter", this.onTrafficLightMouseEnter.bind(this));
			greenLight.addEventListener("mouseleave", this.onTrafficLightMouseLeave.bind(this));
			greenLight.setAttribute("reservation-id", reservation.reservationid);
			trafficLight.appendChild(greenLight);

			this.reservationList.appendChild(reservationItem);
		}
	}

	formatDate(date) {
		return Intl.DateTimeFormat([ ], { dateStyle: "short" }).format(new Date(date.replace(" ", "T")));
	}

	onBackButtonPressed(event) {
		this.dismissModally();
	}

	onRedLightPressed(event) {
		var reservationId = parseInt(event.currentTarget.getAttribute("reservation-id"));
		ReservationManager.deleteReservation(reservationId, this.onDeletionSuccess, this.onUpdateError);
	}

	onYellowLightPressed(event) {
		var reservationId = parseInt(event.currentTarget.getAttribute("reservation-id"));
		ReservationManager.setReservationStatus(reservationId, 1, this.onUpdateSuccess, this.onUpdateError);
	}

	onGreenLightPressed(event) {
		var reservationId = parseInt(event.currentTarget.getAttribute("reservation-id"));
		ReservationManager.setReservationStatus(reservationId, 2, this.onUpdateSuccess, this.onUpdateError);
	}

	onDeletionSuccess(data) {
		var reservationItem = document.body.querySelector(".traffic-light .light.red[reservation-id=\"" + data.reservation_id + "\"]").parentNode.parentNode.parentNode;
		reservationItem.parentNode.removeChild(reservationItem);
		ReservationManager.deleteReservationLocally(data.reservation_id);
	}

	onUpdateSuccess(data) {
		document.body.querySelector(".traffic-light .light.red[reservation-id=\"" + data.reservation_id + "\"]").parentNode.className = "traffic-light " + (data.status == 1 ? "yellow" : "green");
		ReservationManager.setReservationStatusLocally(data.reservation_id, data.status);
	}

	onUpdateError(request, status, error) {
		alert("Nein.");
	}

	onTrafficLightMouseEnter(event) {
		var text = "";
		if (event.currentTarget.className == "red light") {
			text = "🚫 Reservation ablehnen und löschen";
		}
		else if (event.currentTarget.className == "yellow light") {
			text = "❓ Status auf \"offen\" setzen";
		}
		else if (event.currentTarget.className == "green light") {
			text = "✅ Reservation bestätigen";
		}

		this.statusTooltip.setText(text);
		this.statusTooltip.showForElement(event.currentTarget);
	}

	onTrafficLightMouseLeave(event) {
		this.statusTooltip.dismiss();
	}
}

UIKit.registerViewControllerType(ManageViewController);