---
/**
 * DEFAULT CONTROL COMPONENT
 */
import type { Radio, Dropdown, TextArea } from '@astro-reactive/common';
import type { FormControl } from '../core/form-control';
import DropdownControl from './controls/Dropdown.astro';
import TextAreaControl from './controls/TextArea.astro';
import Input from './controls/Input.astro';
import RadioGroup from './controls/RadioGroup.astro';
import Errors from './Errors.astro';
import Label from './Label.astro';

export interface Props {
	control: FormControl;
	showValidationHints: boolean;
	showErrors?: boolean; // feature flag for showing validation errors
	readOnly?: boolean;
}

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

const hasError: boolean = control.errors?.some((error) => error.category === 'error');
const hasWarn: boolean = control.errors?.some((error) => error.category === 'warn');
const hasInfo: boolean = control.errors?.some((error) => error.category === 'info');
---

<div
	class="field"
	data-validator-error={hasError ? hasError.toString() : null}
	data-validator-warn={hasWarn ? hasWarn.toString() : null}
	data-validator-info={hasInfo ? hasInfo.toString() : null}
>
	<Label control={control} showValidationHints={showValidationHints}>
		{
			control.type === 'radio' ? (
				<RadioGroup control={control as Radio} readOnly={readOnly} />
			) : control.type === 'dropdown' ? (
				<DropdownControl control={control as Dropdown} readOnly={readOnly} />
			) : control.type === 'textarea' ? (
				<TextAreaControl control={control as TextArea} readOnly={readOnly} />
			) : (
				<Input control={control} readOnly={readOnly} />
			)
		}
		{showErrors && <Errors errors={control.errors} />}
	</Label>
</div>