class WorkTimeClockView extends DragTargetView {
	build(element) {
		super.build(element);

		this.stopButton = document.createElement("BUTTON");
		this.stopButton.className = "stop-button";
		this.stopButton.innerText = "⏏︎";
		this.stopButton.disabled = true;
		this.stopButton.title = "Eject card";
		this.stopButton.addEventListener("click", this.onStopButtonPressed.bind(this));
		element.appendChild(this.stopButton);

		this.cardView = new CardView();
		this.cardView.element.style.display = "none";
		element.appendChild(this.cardView.element);

		return element;
	}

	viewDidLoad() {
		OnTime.workTimeManager.addEventListener("periodstarted", this.onPeriodStarted.bind(this));
		OnTime.workTimeManager.addEventListener("periodadderror", this.onPeriodStartError.bind(this));
		OnTime.workTimeManager.addEventListener("periodchanged", this.onPeriodChanged.bind(this));
		OnTime.workTimeManager.addEventListener("periodchangeerror", this.onPeriodChangeError.bind(this));
		OnTime.cardManager.addEventListener("cardchanged", this.onCardChanged.bind(this));
	}

	onDragOver(draggedObject, validType, x, y) { }

	onDragEnter(draggedObject, validType) { }

	onDragExit() { }

	onDragEnd() { }

	onDrop(droppedObject, sourceView) {
		if (this.activePeriod && this.activePeriod.card_key == droppedObject.card_key) {
			return;
		}

		this.removeCard();
		this.insertCard(droppedObject);
	}

	acceptsType(draggableType) {
		//Refuse the card if the user has no write permission for periods.
		return (draggableType == "card") && ("period" in OnTime.userManager.permissions) && OnTime.userManager.permissions.period == "w";
	}

	onPeriodStarted(event) {
		this.counting = true;
		this.activePeriod = event.period;

		//Display the card in the clock view.
		this.cardView.setCardData(OnTime.cardManager.getCard(this.activePeriod.card_key));
		this.cardView.element.style.display = "";
		this.stopButton.disabled = false;
	}

	onPeriodStartError(event) {
		this.counting = false;
	}

	onPeriodChanged(event) {
		if (this.activePeriod && event.period.period_key == this.activePeriod.period_key) {
			if (event.period.end_time) {
				this.onCardRemoved();
				
				this.counting = false;
				this.activePeriod = null;
			}
		}
	}

	onPeriodChangeError(event) {
		if (this.activePeriod && event.period.period_key == this.activePeriod.period_key) {
			if (event.period.end_time) {
				this.counting = true;
				this.stopButton.disabled = false;
			}
		}
	}

	insertCard(card) {
		if (this.counting) {
			alert("There is already an active card. Remove it first.");
		}

		this.counting = true;

		OnTime.workTimeManager.startPeriod(card);
	}

	removeCard() {
		if (!this.activePeriod) {
			return;
		}

		if (!this.counting) {
			alert("The card has already been removed.");
		}
		this.counting = false;

		OnTime.workTimeManager.endPeriod(this.activePeriod);
	}

	onCardRemoved() {
		if (!this.activePeriod) {
			return;
		}

		//Either remove the card from the clock entirely or just hover it above if the user paused the counting.
		this.cardView.element.style.display = "none";
	}

	onStopButtonPressed(event) {
		this.removeCard();
		this.stopButton.disabled = true;
	}

	/**
	 * We want the dummy card to look the same as the original does.
	 */
	onCardChanged(event) {
		if (this.activePeriod && this.activePeriod.card_key == event.card.card_key) {
			this.cardView.setCardData(event.card);
		}
	}
}

UIKit.registerViewType(WorkTimeClockView, "work-time-clock");