class ProvidePhoneNumber {
	modal;
	declineModal;
	providePhoneNumberLaterButton;
	phoneNumberInput;
	agovInputPhoneNumberInput;
	repeatPhoneNumberInput;
	agovInputRepeatPhoneNumberInput;

	constructor() {
		this.modal = document.querySelector('#modal');
		this.declineModal = document.querySelector('#declineModal');
		this.providePhoneNumberLaterButton = document.querySelector('#providePhoneNumberLaterButton');
		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('#declineModalBack').addEventListener('click', () => {
			this.resetValidation(this.agovInputPhoneNumberInput);
			this.setInvisible(this.declineModal);
		});
		document.querySelector('#repeatPhoneNumberModalBack').addEventListener('click', () => {
			this.initializePhoneInput(this.phoneNumberInput);
			this.setInvisible(this.modal);
		});
		document.querySelector('#repeatPhoneNumberModalContinue').addEventListener('click', () => {
			if (this.validateInput(this.agovInputRepeatPhoneNumberInput)) {
				this.evaluatePhoneNumbersAndSubmit();
				this.initializePhoneInput(this.phoneNumberInput);
			}
		});
		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.setVisible(this.modal);
			}
			else if (this.phoneNumberInput.value.trim() === '' ||
				this.phoneNumberInput.value.trim() === dialCode) {
				this.setVisible(this.declineModal);
			}
		});
	}

	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;
	}

	setInvisible(modalElement) {
		window.utils.changeDisplay(modalElement, 'hidden', 'block');
	}

	setVisible(modalElement) {
		window.utils.changeDisplay(modalElement, 'block', 'hidden');
		const isMobile = !!/(iPhone|Android)/.test(window.navigator.userAgent);
		if (isMobile) {
			modalElement.classList.add('mobileDrawer');
			document.dispatchEvent(new Event('initDrawerPopup'));
		}
	}

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

	evaluatePhoneNumbersAndSubmit() {
		if (this.arePhoneNumbersEqual()) {
			document.querySelector('#mobile').value = this.repeatPhoneNumberInput.value.trim().replaceAll(' ', '');
			// 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 {
			this.setInvisible(this.modal);
			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');
		}
	}
}

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