<template>
  <FormField
    :name="name"
    :label="label"
    :disabled="disabled"
    :required="required"
    :readonly="readonly"
  >
    <template #input="{ invalid, id, value, onInput, onFocus, onBlur }">
      <textarea
        :id="id"
        :placeholder="placeholder"
        :disabled="disabled"
        :readonly="readonly"
        :clearable="clearable"
        :model-value="(value as string)"
        :class="inputClass(invalid)"
        :rows="rows"
        :cols="cols"
        @input="onInput"
        @focus="onFocus"
        @blur="onBlur"
      />
    </template>
    <template #default><slot /></template>
  </FormField>
</template>

<script setup lang="ts">
import FormField from '../FormField.vue';

interface TextareaProps {
  label: string;
  name: string;
  rows?: string;
  cols?: string;
  disabled?: boolean;
  required?: boolean;
  clearable?: boolean;
  readonly?: boolean;
  placeholder?: string;
}

const props = withDefaults(defineProps<TextareaProps>(), {
  disabled: false,
});

const inputClass = (invalid: boolean) => {
  return [
    invalid
      ? 'border-red-300 focus:border-red-500 focus:ring-red-500'
      : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500',
    props.disabled ? 'bg-gray-100 hover:border-gray-400' : '',
    `mt-1 block rounded-md shadow-sm sm:text-sm transition-colors duration-200`,
  ];
};
</script>
