<script lang="ts" setup>
import { onResetUi, vue } from '@factor/api'
import { textInputClasses } from './theme'

const props = defineProps({
  modelValue: { type: String, default: '' },
  rows: { type: Number, default: 1 },
  inputClass: { type: String, default: '' },
})

const emit = defineEmits<{
  (event: 'update:modelValue', payload: string): void
}>()

const textareaElement = vue.ref<HTMLElement>()

function setHeight(): void {
  const ta = textareaElement.value
  if (!ta)
    return

  // const sh = ta.scrollHeight

  ta.style.height = 'auto'
  ta.style.height = `${ta.scrollHeight}px`
}
vue.onMounted(() => setHeight())
onResetUi(() => setHeight())
vue.watch(
  () => props.modelValue,
  () => setHeight(),
)

vue.onMounted(() => {
  const ta = textareaElement.value
  if (!ta)
    return

  setHeight()

  // ta.addEventListener("input", () => setHeight())
})

function send(el: EventTarget | null): void {
  setHeight()
  const elem = el as HTMLInputElement
  const txt = elem.value
  emit('update:modelValue', txt)
}
</script>

<template>
  <textarea
    ref="textareaElement"
    spellcheck="false"
    :class="[textInputClasses(), modelValue ? 'set' : 'empty', inputClass]"
    :value="modelValue"
    :rows="rows"
    @input="send($event.target)"
  />
</template>

<style lang="less">
textarea.standard-textarea {
  width: 100%;
  min-height: 5em;
  line-height: 1.5;
}
</style>
