document.addEventListener('DOMContentLoaded', () => {
	const form = document.querySelector('form');
	const confirmButton = document.querySelector('agov-button[data-id="confirm"]');
	const cancelButton = document.querySelector('agov-button[data-id="cancel"]');
	const agovCheckbox = document.querySelector('agov-checkbox[data-id="confirm-data"]');
	const label = document.querySelector('#confirmLabel');
	const errorBanner = document.querySelector('.error');

	const hiddenInput = document.createElement('input');
	hiddenInput.type = 'hidden';
	hiddenInput.name = 'confirmIdentity';
	form.appendChild(hiddenInput);

	const showError = () => {
		errorBanner.classList.toggle('hidden');
		label.classList.remove('text-space-blue', 'dark:text-white');
		label.classList.add('text-error', 'dark:!text-error-input-dark');
	};

	const hideError = () => {
		errorBanner.classList.add('hidden');
		label.classList.remove('text-error', 'dark:!text-error-input-dark');
		label.classList.add('text-space-blue', 'dark:text-white');
		agovCheckbox.validity = true;
	};

	confirmButton.addEventListener('click', (e) => {
		e.preventDefault();
		if (!agovCheckbox.checkboxTag.checked) {
			hiddenInput.value = '';
			agovCheckbox.validity = false;
			showError();
		}
		else {
			hiddenInput.value = 'yes';
			agovCheckbox.validity = true;
			hideError();
			form.submit();
		}
	});

	cancelButton.addEventListener('click', () => {
		hiddenInput.value = '';
	});

	agovCheckbox.checkboxTag.addEventListener('change', () => {
		if (agovCheckbox.checkboxTag.checked) {
			hideError();
		}
	});
});
