<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"
                    @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
                    @focus="$emit('focus')" @blur="$emit('blur')"
                    class="border border-block placeholder:text-gray dark:placeholder:text-button-disabled rounded-lg px-6 h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2 text-button" />
                <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('Panel.Component.InputDefault', 'Show password') : $t('Panel.Component.InputDefault', 'Hide password')
                    " @click="isPasswordVisible = !isPasswordVisible">
                    <FaceObserver class="ml-4 text-xl leading-6" :isPasswordVisible="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 | any;
    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>