/**
 * Frontend JavaScript for the Form Block
 * Handles form validation and submission
 */

// Wait for DOM to be ready
document.addEventListener('DOMContentLoaded', function() {
	let formController = new window.jvbForm();

 	document.querySelectorAll('.jvb-form-block').forEach(block => {
		const formHandler = formController.registerForm(block.querySelector('form'));
	});
	formController.subscribe((event, data) => {
		if (event === 'form-submit') {
			handleFormSubmission(null, data.data, data.config.element);
		}
	});
});

async function handleFormSubmission(event, data, form) {
	let headers = {
		'X-WP-Nonce': jvbSettings.nonce,
		'Content-Type': 'application/json'
	};

	data['form_type'] = form.dataset.formId;
	data['form_id'] = form.id;
	let block = form.closest('.jvb-form-block');
	let loading = window.getTemplate('spinner');
	form.hidden = true;
	block.classList.add('loading');
	block.prepend(loading);
	try {
		const response = await fetch (`${jvbSettings.api}forms`,
			{
				method: 'POST',
				headers,
				body: JSON.stringify(data)
			});
		if (!response.ok) {
			const errorData = await response.json().catch(() => ({}));
			throw new Error(errorData.message|| `Request failed with status ${response.status}`);
		}

		updateUI(await response.json(), block);
	} catch (error) {
		throw error;
	} finally {
		block.classList.remove('loading');
	}
}

function updateUI(response, block) {
	if (response.success === false) {
		let form = block.querySelector('form');
		form.removeAttribute('hidden');
		if ('required' in response) {
			response.required.forEach(required => {
				let item = form.querySelector(`[name=${required}]`);
				item.classList.add('required', 'error');
				item.scrollIntoView();
			});
		}
		return;
	}
	let summary = window.getTemplate('formSummary');
	summary.querySelector('h2').textContent = 'Success!';
	console.log('Form Response: ', response);
	for (let [key, value] of Object.entries(response)) {
		let item = summary.querySelector(`#${key}`);

		let title = item.querySelector('h4');
		if (title.innerText.includes('%s')) {
			title.innerHTML = title.replace('%s', '<b>'+value+'</b>');
		} else {
			item.querySelector('div').innerHTML = value;
		}
	}
	block.append(summary);
}