<template>
  <div :class="['form-item', half ? 'form-item-half' : '', elclass || '']">
    <span class="form-item-title" v-if="title !== undefined && title !== ''">
      {{ title }}
    </span>
    <slot name="input">
      <label>
        <span v-if="label !== undefined && label !== ''">
          {{ label }}
          <i v-if="required" class="form-item-alert">*</i>
        </span>
        <textarea
          :value="modelValue"
          :rows="rows"
          :placeholder="placeholder"
          :disabled="disabled"
          @input="OnInput"
          @click="OnClick"
          @change="OnChange"
          @focus="OnFocus"
          @keydown="OnKeyDown"
          @keyup="OnKeyUp"
          :class="[
            invalidText !== undefined && invalidText !== '' ? 'invalid' : '',
            iclass || ''
          ]"
          :minlength="minlength"
          :maxlength="maxlength"></textarea>
        <span
          class="form-item-alert"
          v-if="InvalidMessages.length > 0 && InvalidMessages !== ''">
          {{ InvalidMessages }}
        </span>
        <span
          class="form-item-description"
          v-if="description !== undefined && description !== ''">
          {{ description }}
        </span>
      </label>
    </slot>
  </div>
</template>
<script setup lang="ts">
  import { ref, computed, watch } from 'vue'

  export interface Props {
    label?: string
    disabled?: boolean
    modelValue: number | string | null | undefined
    half?: boolean
    title?: string
    rows?: number
    invalidText?: string
    description?: string
    placeholder?: string
    required?: boolean
    maxlength?: string
    minlength?: string
    iclass?: string
    elclass?: string
    modelKey?: string
  }
  const props = withDefaults(defineProps<Props>(), {
    disabled: false,
    half: false,
    rows: 4,
    required: false
  })

  const emit = defineEmits([
    'update:modelValue',
    'change',
    'input',
    'focus',
    'click',
    'keydown',
    'keyup'
  ])
  interface InvalidMessagesObj {
    [key: string]: any
  }
  const InvalidMessageText = ref<InvalidMessagesObj>({})
  const InvalidMessages = computed(() => {
    let text = ''
    Object.keys(InvalidMessageText.value).forEach((k: string, i: number) => {
      text += InvalidMessageText.value[k] + ', '
    })
    return text
  })

  const OnChange = (e: Event) => {
    emit('update:modelValue', (e.target as HTMLInputElement).value)
    emit('change', e)
  }
  const OnInput = (e: Event) => {
    emit('update:modelValue', (e.target as HTMLInputElement).value)
    emit('input', e)
  }
  const OnFocus = (e: Event) => {
    emit('focus', e)
  }
  const OnClick = (e: Event) => {
    emit('focus', e)
  }
  const OnKeyDown = (e: Event) => {
    emit('update:modelValue', (e.target as HTMLInputElement).value)
    emit('keydown', e)
  }
  const OnKeyUp = (e: Event) => {
    if (props.minlength !== undefined) {
      if ((e.target as HTMLInputElement)?.value.length < Number(props.minlength)) {
        InvalidMessageText.value.minlength = `Girdiğiniz bilgi en az ${props.minlength} karakter uzunluğunda olmalı`
      } else {
        delete InvalidMessageText.value.minlength
      }
    }

    emit('update:modelValue', (e.target as HTMLInputElement).value)
    emit('keyup', e)
  }

  watch(
    () => props.invalidText,
    () => {
      if (props.invalidText !== undefined && props.invalidText !== '') {
        InvalidMessageText.value = {}
        InvalidMessageText.value.invalid = props.invalidText
      } else {
        delete InvalidMessageText.value.invalid
      }
    }
  )
</script>
