class Login {
	constructor() {
		this.initElements();
	}

	initElements() {
		this.selectors = {
			magic: 'form#magic-link-form',
			login: 'form#loginform',
		}
		this.ui = window.uiFromSelectors(this.selectors);
		this.forms = {};

		for (let [id, form] of Object.entries(this.ui)) {
			if (form) {
				this.forms[id] =  window.jvbForm.registerForm(form, {
					cache: 		false,
					showStatus: false,
					useQueue: 	false,
				});

				if (id === 'magic') {
					window.jvbForm.subscribe((event, data) => {

						if (data.config === this.forms[id]) {
							if (event === 'form-submit') {
								form.hidden = true;
								this.spinner = window.jvbTemplates.create('spinner', {});
								form.parentElement.append(this.spinner);

							} else if (event === 'form-success') {
								form.hidden = true;
								let el = window.jvbTemplates.create('formSummary', {config: form, changes: {}});
								Array.from(el.children).forEach(ch => {
									if (ch.tagName === 'H2') {
										ch.textContent = 'Check your email!';
									} else if (ch.classList.contains('message')) {
										let children = Array.from(ch.children);
										children[0].textContent = 'You\'ll find a magic link to log in in your email';
										children[1].textContent = 'If you can\'t find it - check your spam folder.';
										children[2].textContent = 'The link will expire in 15 minutes.';
										children[3].remove();
									} else if (ch.classList.contains('summary')) {
										ch.remove();
									}
								});
								if (this.spinner) {
									this.spinner.remove();
								}
								form.parentElement.append(el);
							} else if (event === 'form-error' ) {
								if (this.spinner) {
									this.spinner.remove();
								}
								if (Object.hasOwn(data.data, 'code') && data.data.code === 'rate_limit_exceeded') {

									let el = window.jvbTemplates.create('formSummary', {config: form, changes: {}});
									Array.from(el.children).forEach(ch => {
										if (ch.tagName === 'H2') {
											ch.textContent = 'Slow down there!';
										} else if (ch.classList.contains('message')) {
											let children = Array.from(ch.children);
											children[0].textContent = 'You tried submitting a few too many times in a short window.';
											children[1].textContent = 'Try again in an hour or so.';
											children[2].remove();
											children[3].remove();
										} else if (ch.classList.contains('summary')) {
											ch.remove();
										}
									});
									form.parentElement.append(el);
								} else {
									let el = window.jvbTemplates.create('formSummary', {config: form, changes: {}});
									Array.from(el.children).forEach(ch => {
										if (ch.tagName === 'H2') {
											ch.textContent = 'Something went wrong.';
										} else if (ch.classList.contains('message')) {
											let children = Array.from(ch.children);
											children[0].textContent = 'We aren\'t exactly sure what.';
											children[1].textContent = 'Try clearing your cookies and trying again. If the problem persists, let us know!';
											children[2].remove();
											children[3].remove();
										} else if (ch.classList.contains('summary')) {
											ch.remove();
										}
									});
									form.parentElement.append(el);
								}
							}
						}

					});
				}

			}
		}
	}
}

document.addEventListener('DOMContentLoaded', async function() {
	window.auth.subscribe((event) => {
		if (event === 'auth-loaded') {
			window.login = new Login();
		}
	});
})