<script setup lang="ts">
import type { PublicFormField } from '@/types/forms/formBuilder'
import { getValidatorsForField } from '@/utils/forms/formValidation'

const props = defineProps<{
  field: PublicFormField
  modelValue: unknown
  errorMessages?: string[]
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', v: string): void
  (e: 'blur'): void
}>()

const rules = computed(() => getValidatorsForField(props.field))

const model = computed({
  get: () => (props.modelValue ?? '') as string,
  set: (v: string) => emit('update:modelValue', v),
})
</script>

<template>
  <AppTextarea
    v-model="model"
    :label="field.label"
    :hint="field.help_text ?? undefined"
    persistent-hint
    :rows="4"
    auto-grow
    :rules="rules"
    :error-messages="errorMessages"
    :required="field.is_required"
    :maxlength="field.validation_rules?.max_length ?? undefined"
    @blur="emit('blur')"
  />
</template>
