<template>
  <textarea
    v-model="model"
    v-bind="$props"
    :id="fieldId"
    :name="fieldName"
    :required="fieldRequired"
    :disabled="fieldDisabled"
    :class="classes"
    class="overflow-clip"
    wrap="hard"
  />
</template>

<script setup>
  import { computed, inject } from "vue";
  import { useVModel } from '@vueuse/core'
  import { textareaProps } from "@/components/textarea/textarea-props.js";
  import { controlProps } from "@/util/controls.js";
  import {CONTROL_ID, CONTROL_NAME, CONTROL_REQUIRED, CONTROL_DISABLED} from "@/util/controls";
  import {useInjectedProp, useSize} from "@/composables/useInjections";


  const props = defineProps({
    ...textareaProps,

    size: controlProps.size
  })

  const emit = defineEmits([
    'update:modelValue'
  ])

  const model = useVModel(props, 'modelValue', emit)

  // Textarea is a little unusual in that we handle size in the base component
  // todo: consider pushing this up into AisTextarea
  const size =  useSize(props, 'md')

  const classes = computed(() => {
    return [size.value]
  })

  // Injected values will take precedence over prop values
  let fieldId = useInjectedProp(CONTROL_ID, props, 'id')
  let fieldName = useInjectedProp(CONTROL_NAME, props, 'name')
  let fieldDisabled = useInjectedProp(CONTROL_DISABLED, props, 'disabled')
  let fieldRequired = useInjectedProp(CONTROL_REQUIRED, props, 'required')
</script>
