---
/**
 * TEXT AREA COMPONENT
 */
import type { TextArea } from '@astro-reactive/common';

export interface Props {
	control: TextArea;
	readOnly?: boolean;
}

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

const { validators = [] } = control;

// @ts-ignore
const validatorAttributes: Record<string, string> = validators.reduce((prev, val) => {
	const validator = typeof val === 'string' ? val : val.validator;
	const split: string[] = validator.split(':');
	const label: string = `data-${split[0]}` || 'invalid';
	const value: string | null = split.length > 1 ? split[1] ?? null : 'true';
	const category = typeof val === 'string' ? 'error' : val.category || 'error';
	const categoryLabel: string = `data-${split[0]}-category`;

	return {
		...prev,
		[label]: value,
		[categoryLabel]: category,
	};
}, {});
---

<textarea
	name={control.name}
	id={control.id}
	placeholder={control?.placeholder}
	rows={control?.rows ?? 3}
	cols={control?.cols ?? 21}
	data-label={control?.label}
	readonly={readOnly || null}
	data-validation-on={control.triggerValidationOn ? control.triggerValidationOn : null}
	{...validatorAttributes}
>
	{control.value}
</textarea>