---
import type { FormControl } from '../core/form-control';

export interface Props {
	control: FormControl;
	showValidationHints: boolean;
	showOnlyLabel?: boolean;
}

const { control, showValidationHints, showOnlyLabel = false } = Astro.props;

const { validators = [] } = control;

const isRequired = showValidationHints && validators.includes('validator-required');

const validatorAttirbutes: Record<string, string> = validators?.reduce(
	(prev, validator) => {
		const split: string[] = validator.split(':');
		const label: string = `data-${split[0]}` || 'invalid';
		const value: string | null = split.length > 1 ? split[1] ?? null : 'true';

		return {
			...prev,
			[label]: value,
		};
	},

	{}
);
---

<div class="field" data-validator-hints={showValidationHints.toString()}>
	{
		control.label && control.labelPosition === 'left' && (
			<label for={control?.id ?? control.name}>
				{isRequired && <span>*</span>}
				{control.label}
			</label>
		)
	}

	{
		!showOnlyLabel && (
			<input
				name={control.name}
				id={control?.id ?? control.name}
				type={control.type}
				value={control.value?.toString()} 
				checked={control.value === 'checked'}
				placeholder={control.placeholder}
				data-label={control.label}
				data-label-position={control.labelPosition}
				{...validatorAttirbutes}
			/>
		)
	}

	{
		control.label && control.labelPosition === 'right' && (
			<label for={control?.id ?? control.name}>
				{isRequired && <span>*</span>}
				{control.label}
			</label>
		)
	}
</div>

<style>
	[data-validator-hints='true'][data-validator-haserrors='true'],
	[data-validator-hints='true'] [data-validator-haserrors='true'] {
		color: red;
		border-color: red;
	}
</style>