---
import type { HookType } from 'common/types';

export interface Props {
	hook?: HookType;
	displayErrorMessages?: boolean;
}

const { hook = 'all', displayErrorMessages = false } = Astro.props;
---

<input hidden name="hook" id="hook" value={hook} />
<input
	hidden
	name="displayErrorMessages"
	id="displayErrorMessages"
	value={displayErrorMessages.toString()}
/>

<script>
	// TODO: selectors should by unique IDs generated by our library
	// TODO: implement type guards pls 😱
	// TODO: create deserializer util
	// TODO: handle hooks / when to attach event listeners
	// const form = document.querySelector('form');

	import { clearErrors, validate } from './core';

	// const hook: HookType = (document.getElementById('hook') as HTMLInputElement).value as HookType;
	const inputs = [...document.querySelectorAll('form input')] as HTMLInputElement[];

	inputs?.forEach((input) => {
		input.addEventListener('blur', (e: Event) => {
			// NOTE: event target attribute names are converted to lowercase
			const element = e.target as HTMLInputElement;
			const attributeNames = element?.getAttributeNames() || [];
			const validators = attributeNames
				.filter((attribute) => attribute.includes('data-validator-'))
				.map((attribute) => {
					const limit = element.getAttribute(attribute);
					return `${attribute}:${limit}`;
				});
			const value = element.value;
			const errors = validate(value, validators);

			// set element hasErrors
			if (errors.length) {
				element.parentElement?.setAttribute('data-validator-haserrors', 'true');
				element.setAttribute('data-validator-haserrors', 'true');
				element.classList.add('has-errors');
				// TODO: display error messages
			} else {
				element.parentElement?.removeAttribute('data-validator-haserrors');
				element.removeAttribute('data-validator-haserrors');
				element.classList.remove('has-errors');
			}
		});

		input.addEventListener('input', clearErrors);
	});
</script>