class ProvidePhoneNumber {
	repeatModal;
	declineModal;
	phoneNumberInput;
	agovInputPhoneNumberInput;
	repeatPhoneNumberInput;
	agovInputRepeatPhoneNumberInput;
	lastOpenedModal;

	constructor() {
		this.repeatModal = document.querySelector('#repeatModal');
		this.declineModal = document.querySelector('#declineModal');
		this.phoneNumberInput = document.querySelector('#phoneNumberInput');
		this.agovInputPhoneNumberInput = document.querySelector('#agovInputPhoneNumberInput');
		this.agovInputRepeatPhoneNumberInput = document.querySelector('#agovInputRepeatPhoneNumberInput');
		this.repeatPhoneNumberInput = document.querySelector('#repeatPhoneNumberInput');

		this.initializePhoneInput(this.phoneNumberInput);
		this.addPhoneInputEventHandlers(this.phoneNumberInput);
		this.addPhoneInputEventHandlers(this.repeatPhoneNumberInput);

		document.querySelector('#providePhoneNumberContinueButton').addEventListener('click', () => {
			const dialCode = `+${window.phoneNumberUtils.getDialCode()}`;
			if (this.validateInput(this.agovInputPhoneNumberInput)) {
				this.repeatPhoneNumberInput.value = '';
				this.initializePhoneInput(this.repeatPhoneNumberInput);
				this.resetValidation(this.agovInputRepeatPhoneNumberInput);
				this.showErrorBanner(false);
				this.lastOpenedModal = 'repeatModal';
				window.utils.openModal(this.repeatModal);
			}
			else if (this.phoneNumberInput.value.trim() === '' ||
				this.phoneNumberInput.value.trim() === dialCode) {
				window.utils.openModal(this.declineModal);
			}
		});
	}

	onCloseOpenModal() {
		if (this.lastOpenedModal === 'declineModal') {
			window.providePhoneNumber.onCloseDeclineModal();
		}
		else {
			window.providePhoneNumber.onRepeatModalCancel();
		}
	}

	onRepeatModalSubmit() {
		if (this.validateInput(this.agovInputRepeatPhoneNumberInput)) {
			this.evaluatePhoneNumbersAndSubmit();
			this.initializePhoneInput(this.phoneNumberInput);
		}
	}

	onRepeatModalCancel() {
		this.initializePhoneInput(this.phoneNumberInput);
		window.utils.closeModal(this.repeatModal);
	}

	addPhoneInputEventHandlers(phoneInputElement) {
		phoneInputElement.addEventListener('input', () => {
			this.formatAndEmitPhoneNumberValue(phoneInputElement);
		});
		phoneInputElement.addEventListener('countrychange', () => {
			this.onPhoneNumberCountryChange(phoneInputElement);
		});
	}

	async initializePhoneInput(inputElement) {
		if (inputElement.value) {
			await window.phoneNumberUtils.initializePhoneNumberField(inputElement, inputElement.value);
		}
		else {
			await window.phoneNumberUtils.initializePhoneNumberField(inputElement);
		}
	}

	onPhoneNumberCountryChange(inputElement) {
		inputElement.value = window.phoneNumberUtils.formatAfterCountryChange();
	}

	formatAndEmitPhoneNumberValue(inputElement) {
		inputElement.value = window.phoneNumberUtils.formatUsingInputValue();
	}

	resetValidation(agovInput) {
		agovInput.validity = true;
	}

	validateInput(agovInput) {
		const innerInput = agovInput.querySelector('input');
		if (innerInput.value.trim().length === 0) {
			agovInput.supportingText = 0;
			agovInput.focus();
			agovInput.validity = false;
			return false;
		}
		else if (!window.phoneNumberUtils.validatePhoneNumber(false, true)) {
			agovInput.supportingText = 2;
			agovInput.focus();
			agovInput.validity = false;
			return false;
		}
		return true;
	}

	arePhoneNumbersEqual() {
		const phoneNumber = this.phoneNumberInput.value.trim();
		const repeatedPhoneNumber = this.repeatPhoneNumberInput.value.trim();
		return phoneNumber === repeatedPhoneNumber;
	}

	evaluatePhoneNumbersAndSubmit() {
		if (this.arePhoneNumbersEqual()) {
			document.querySelector('#mobile').value = window.phoneNumberUtils.formatDefault(this.repeatPhoneNumberInput.value);
			// Some other 'click' listeners from gsap (used in drawer.js) seem to interfere with the trigger click on
			// submitPhoneNumber button. It happens only on mobile devices, where the drawer is used. setTimeout seems to help
			// to avoid the issue (although it is just a workaround).
			setTimeout(() => {
				document.querySelector('#submitPhoneNumber').click();
			}, 100);
		}
		else {
			window.utils.closeModal(this.repeatModal);
			this.showErrorBanner(true);
		}
	}

	showErrorBanner(visible) {
		const errorBanner = document.getElementById('errorBanner');
		if (visible) {
			window.utils.changeDisplay(errorBanner, 'block', 'hidden');
		}
		else {
			window.utils.changeDisplay(errorBanner, 'hidden', 'block');
		}
	}

	onCloseDeclineModal() {
		this.resetValidation(this.agovInputPhoneNumberInput);
		window.utils.closeModal(this.declineModal);
	}

	onSubmitDeclineModal() {
		setTimeout(() => {
			document.querySelector('#continueWithoutPhoneNumberButton').click();
		});
	}
}

document.addEventListener('DOMContentLoaded', () => {
	document.dispatchEvent(new Event('initPhoneNumberUtils'));
	window.providePhoneNumber = new ProvidePhoneNumber();

	document.addEventListener('declineModalCancelEvent', () => {
		window.providePhoneNumber.onCloseDeclineModal();
	});
	document.addEventListener('declineModalSubmitEvent', () => {
		window.providePhoneNumber.onSubmitDeclineModal();
	});

	document.addEventListener('repeatModalCancelEvent', () => {
		window.providePhoneNumber.onRepeatModalCancel();
	});
	document.addEventListener('repeatModalSubmitEvent', () => {
		window.providePhoneNumber.onRepeatModalSubmit();
	});

	document.addEventListener('closeDrawerPopup', () => {
		window.providePhoneNumber.onCloseOpenModal();
	});

	document.addEventListener('keyup', (e) => {
		if (e.key === 'Escape') {
			window.providePhoneNumber.onCloseOpenModal();
		}
	});
});
