---
import type { Submit } from '@astro-reactive/common';
import { FormGroup, FormControl } from '../core';
import FieldSet from './FieldSet.astro';
import Field from './Field.astro';
import ShortUniqueId from 'short-unique-id';

export interface Props {
	formGroups: FormGroup | FormGroup[];
	readOnly?: boolean;
	showValidationHints?: boolean;
	validateOnLoad?: boolean;
	submitControl?: Submit;
	theme?: 'light' | 'dark';
}

const {
	submitControl,
	formGroups = [],
	theme,
	showValidationHints = false,
	validateOnLoad = false,
	readOnly = false,
} = Astro.props;

const uid = new ShortUniqueId({ length: 9 });
const formTheme = theme ?? 'light';
const formName = Array.isArray(formGroups) ? null : formGroups?.name || null;
const formId = Array.isArray(formGroups) ? uid() : formGroups?.id || null;

// if `validateOnLoad` prop is true, 
// it should forced all FormControl to validate on load
if (validateOnLoad) {
	if (Array.isArray(formGroups)) {
		formGroups.forEach(group =>
			group.controls.forEach(control => 
				control.setValidateOnLoad(validateOnLoad)
			)
		);
	} else {
		formGroups.controls.forEach(control => 
			control.setValidateOnLoad(validateOnLoad)
		)
	}
}
---

<form
	class={formTheme}
	name={formName}
	id={formId}
	data-validator-hints={showValidationHints.toString()}
>
	{
		Array.isArray(formGroups)
			? formGroups?.map((group) => (
					<FieldSet showValidationHints={showValidationHints} group={group} readOnly={readOnly} />
			  ))
			: formGroups?.controls.map((control) => (
					<Field showValidationHints={showValidationHints} control={control} readOnly={readOnly} />
			  ))
	}
	{
		submitControl && (
			<Field showValidationHints={showValidationHints} control={new FormControl(submitControl)} />
		)
	}
</form>

<style>
	.light {
		color-scheme: light;
	}

	.dark {
		color-scheme: dark;
	}
</style>

<style is:global>
	[data-validator-hints='true'][data-validator-error='true'],
	[data-validator-hints='true'] [data-validator-error='true'] {
		color: red;
		border-color: red;
	}
	[data-validator-hints='true'][data-validator-warn='true'],
	[data-validator-hints='true'] [data-validator-warn='true'] {
		color: orange;
		border-color: orange;
	}
	[data-validator-hints='true'][data-validator-info='true'],
	[data-validator-hints='true'] [data-validator-info='true'] {
		color: green;
		border-color: green;
	}
</style>