class AddCategoryPopover extends Popover {
	viewDidLoad() {
		this.categoryNameField.addEventListener("keyup", this.onKeyUp.bind(this));
		OnTime.cardManager.addEventListener("categoryadded", this.onCategoryAdded.bind(this));
		this.clear();
	}

	viewDidAppear() {
		this.categoryNameField.focus();
	}

	onAddButtonPressed(event) {
		if (this.categoryIconField.value.length > 2) {
			alert("The category icon must only contain up to two characters or one emoji.");
		}

		this.addButton.disabled = true;

		OnTime.cardManager.addCategory({
			name: this.categoryNameField.value,
			icon: this.categoryIconField.value
		});
	}

	clear() {
		this.categoryNameField.value = "";
		this.categoryIconField.value = "🗃";
		this.addButton.disabled = true;
	}

	onKeyUp(event) {
		if (event.key == "Enter") {
			this.onAddButtonPressed(event);
		}
	}

	onInput(event) {
		if (this.categoryNameField.value && this.categoryNameField.value.length >= 1 && this.categoryIconField.value.length <= 2 && this.categoryIconField.value.length > 0) {
			this.addButton.disabled = false;
		}
		else {
			this.addButton.disabled = true;
		}
	}

	onCategoryAdded(event) {
		this.dismiss(true);
		this.addButton.disabled = false;
		this.clear();
	}
}

UIKit.registerPopoverType(AddCategoryPopover);