
const mainContent = document.querySelector('#mainContent');
const mobileLoginContainer = document.querySelector('#mobileLoginContainer');
const mobileSecurityKeyModal = mobileLoginContainer.querySelector('#securityKeyModal');
const mobileAccessAppModal = mobileLoginContainer.querySelector('#accessAppModal');
const desktopTitle = document.querySelector('#desktopTitle');
const mobileSubtitle = document.querySelector('#mobileSubtitle');
const cannotLoginSubtitle = document.querySelector('#cannotLoginSubtitle');
const cannotLoginSubtitleDrawer = document.querySelector('#cannotLoginSubtitleDrawer');

const accessAppModal = document.querySelector('#accessAppModal');
const securityKeyModal = document.querySelector('#securityKeyModal');
const accessAppBtn = document.querySelector('#accessAppLoginBtn');
const securityKeyBtn = document.querySelector('#securityKeyLoginBtn');

const labelsToChangeBasedOnSelectedMethod = [
	desktopTitle,
	mobileSubtitle,
	cannotLoginSubtitle,
	cannotLoginSubtitleDrawer
];

function setValueToSecurityKeyOrAccessAppLabel(element, selectedMethod) {
	element.textContent = (selectedMethod === 'securityKey'
		? element.dataset.securitykeylabel
		: element.dataset.accessapplabel);
}

function changeDisplay(element, displayToAdd, displayToRemove) {
	if (element) {
		element.classList.remove(displayToRemove);
		element.classList.add(displayToAdd);
	}
}

function showSecurityKeyModal() {
	changeDisplay(securityKeyModal, 'flex', 'hidden');
	changeDisplay(accessAppModal, 'hidden', 'block');
	changeDisplay(mobileSecurityKeyModal, 'flex', 'hidden');
	changeDisplay(mobileAccessAppModal, 'hidden', 'block');
}

function showAccessAppModal() {
	changeDisplay(accessAppModal, 'block', 'hidden');
	changeDisplay(securityKeyModal, 'hidden', 'flex');
	changeDisplay(mobileAccessAppModal, 'block', 'hidden');
	changeDisplay(mobileSecurityKeyModal, 'hidden', 'flex');
}

function hideSecurityKeyAndShowAccessAppBtn() {
	changeDisplay(accessAppBtn, 'block', 'hidden');
	changeDisplay(securityKeyBtn, 'hidden', 'block');
}

function hideAccessAppAndShowSecurityKeyBtn() {
	changeDisplay(securityKeyBtn, 'block', 'hidden');
	changeDisplay(accessAppBtn, 'hidden', 'block');
}

function changeLabelsBasedOnSelectedMethod(selectedMethod) {
	labelsToChangeBasedOnSelectedMethod.forEach(label => {
		if (label) {
			setValueToSecurityKeyOrAccessAppLabel(label, selectedMethod);
		}
	});
}

document.addEventListener('showAccessAppLogin', () => {
	showAccessAppModal();
	hideAccessAppAndShowSecurityKeyBtn();
	changeLabelsBasedOnSelectedMethod('accessApp');
});
document.addEventListener('showSecurityKeyLogin', () => {
	showSecurityKeyModal();
	hideSecurityKeyAndShowAccessAppBtn();
	changeLabelsBasedOnSelectedMethod('securityKey');
});

changeLabelsBasedOnSelectedMethod(mainContent.dataset.lastloginmethod);

if (mainContent.dataset.lastloginmethod === 'securityKey') {
	showSecurityKeyModal();
	changeDisplay(accessAppBtn, 'block', 'hidden');
	changeDisplay(securityKeyBtn, 'hidden', 'block');
}
else {
	showAccessAppModal();
	changeDisplay(securityKeyBtn, 'block', 'hidden');
	changeDisplay(accessAppBtn, 'hidden', 'block');
}

securityKeyBtn.addEventListener('click', () => {
	showSecurityKeyModal();
	hideSecurityKeyAndShowAccessAppBtn();
	changeLabelsBasedOnSelectedMethod('securityKey');
});

accessAppBtn.addEventListener('click', () => {
	showAccessAppModal();
	hideAccessAppAndShowSecurityKeyBtn();
	changeLabelsBasedOnSelectedMethod('accessApp');
});
