/**
 * Frontend JavaScript for the Form Block
 * Handles form validation and submission
 */
class FormBlock {
	constructor() {
		this.controller = new window.jvbForm();

		document.querySelectorAll('.jvb-form-block form').forEach(form => {
			this.controller.registerForm(form);
		});

		this.controller.subscribe((event, data) => {
			if (event === 'form-submit') {
				this.handleFormSubmission(data);
			}
		});
	}

	async handleFormSubmission(data) {
		let [
			formId,
			formConfig,
			formData
		] = [
			data.formId,
			data.config,
			data.data
		];
		let form = formConfig.element;

		let headers = {
			'X-WP-Nonce': jvbSettings.nonce,
			'Content-Type': 'application/json'
		};

		data['form_type'] = formId;
		data['form_id'] = form.id;
		let block = form.closest('.jvb-form-block');
		this.controller.showFormStatus(formId, 'uploading');
		try {
			const response = await fetch (`${jvbSettings.api}forms`,
				{
					method: 'POST',
					headers,
					body: JSON.stringify(formData)
				});
			if (!response.ok) {
				this.controller.showFormStatus(formId, 'error');
				const errorData = await response.json().catch(() => ({}));
				throw new Error(errorData.message|| `Request failed with status ${response.status}`);
			}
			this.controller.showFormStatus(formId, 'submitted');

			this.controller.showSummary(formId, '.jvb-form-block');
			this.controller.store.delete(formId);

		} catch (error) {
			throw error;
		}
	}

	updateUI(response, block) {

		let summary = window.getTemplate('formSummary');
		summary.querySelector('h2').textContent = 'Success!';
		console.log('Form Response: ', response);
		console.log(summary);
		for (let [key, value] of Object.entries(response)) {
			let item = summary.querySelector(`#${key}`);
			if (item) {
				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);
	}
}

document.addEventListener('DOMContentLoaded', function() {
	new FormBlock();
});