class AddCategoryPopover extends Popover {
	constructor(element) {
		super(element);

		this.onCategoryUpdateBound = this.onCategoryUpdate.bind(this);

		TimeCards.dataManager.addStoreErrorListener("card_category", this.onCategoryStoreError.bind(this));
	}

	viewDidLoad() {
		this.categoryNameField.addEventListener("keyup", this.onKeyUp.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."); //TODO: Localize this.
			return;
		}
		if (this.categoryIconField.value.length < 1) {
			return;
		}
		if (this.categoryNameField.value.length < 1) {
			return;
		}

		this.addButton.disabled = true;

		//Add a listener for the next created category.
		TimeCards.dataManager.addDataListener("card_category", {
			name: this.categoryNameField.value,
			icon: this.categoryIconField.value
		}, this.onCategoryUpdateBound);

		TimeCards.dataManager.store("card_category", {
			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;
		}
	}

	onCategoryUpdate(categoryId, category) {
		//Remove the data listener after the category was successfully created.
		TimeCards.dataManager.removeDataListener("card_category", this.onCategoryUpdateBound);

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

	onCategoryStoreError(categoryId, category, error) {
		//Remove the data listener after the category creation failed.
		TimeCards.dataManager.removeDataListener("card_category", this.onCategoryUpdateBound);

		//Call the onInput function to re-enable the add button under the correct conditions.
		this.onInput();
	}
}

UIKit.registerPopoverType(AddCategoryPopover);