<template>
  <div class="ais-control" :class="{ invalid: isInvalid }">
    <BaseTextarea
      v-model="model"
      v-bind="{...$props, ...$attrs}"
    />
  </div>
</template>

<script setup>
  import { useVModel } from '@vueuse/core'
  import { textareaProps } from "@/components/textarea/textarea-props.js";
  import { controlProps } from "@/util/controls.js";

  import BaseTextarea from '@/components/textarea/BaseTextarea.vue'
  import {computed, inject} from "vue";
  import {CONTROL_INVALID} from "@/util/controls";

  const props = defineProps({
    ...textareaProps,

    size: controlProps.size
  })

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

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

  const injectedInvalid = inject(CONTROL_INVALID, false)
  const isInvalid = computed(() => props.invalid || injectedInvalid.value)

</script>
