<template>
  <div class="space-y-[15px]">
    <p :for="`base-input-${id}`" class="pl-6">
      <slot />
    </p>
    <div class="flex flex-col">
      <div class="flex relative">
        <input :id="`base-input-${id}`" :value="modelValue" :type="!isPasswordVisible ? type : 'text'"
               :placeholder="placeholder" :disabled="disabled"
               class="border border-block placeholder:text-gray dark:placeholder:text-button-disabled rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2"
               @input="
                 $emit(
                   'update:modelValue',
                   ($event.target as HTMLInputElement).value,
                 )
               " @focus="$emit('focus')" @blur="$emit('blur')">
        <i v-if="disabled" class="uil uil-lock-alt text-[22px] absolute right-6 top-1/2 -translate-y-1/2 text-gray" />

        <div v-if="type === 'password'" class="order-2 ml-1.5 cursor-pointer" :title="!isPasswordVisible ? $t('show_password') : $t('hide_password')
        " @click="isPasswordVisible = !isPasswordVisible">
          <FaceObserver class="ml-4 text-xl leading-6" :is-password-visible="isPasswordVisible" />
        </div>
      </div>

      <!-- <p class="mt-2 text-xs text-red-600">{{ validationText }}</p> -->

      <p v-if="!validation && validation != null" class="mt-2 text-xs text-red-600">
        {{ validationText }}
      </p>
    </div>
  </div>
</template>

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

defineEmits(['update:modelValue', 'focus', 'blur'])

defineProps<{
  modelValue?: string | undefined
  modelModifiers?: object
  id: number
  type?: string
  disabled?: boolean
  placeholder?: string
  validation?: boolean | null
  validationText?: string
}>()

const isPasswordVisible = ref(false)
</script>

<style>
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
}
</style>
