<template>
  <div class="col">
    <label :for="`${name}-input`" class="form-label">{{ label }}</label>
    <div class="input-group">
      <input
        :id="`${name}-input`"
        :name="name"
        :label="label"
        v-model="value"
        :type="isPasswordShown ? 'text' : 'password'"
        class="form-control"
        :placeholder="label"
        @blur="handleBlur"
      />
      <span class="input-group-text">
        <i
          @click="isPasswordShown = !isPasswordShown"
          :class="`fa ${isPasswordShown ? 'fa-eye' : 'fa-eye-slash'}`"
        ></i>
      </span>
    </div>
    <div class="text-red">{{ errorMessage }}</div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { useField } from "vee-validate";

const emit = defineEmits(["update:modelValue"]);
const props = defineProps({
  modelValue: {
    default: null,
  },
  type: {
    type: String,
    default: "text",
  },
  name: {
    type: String,
    required: false,
  },
  label: {
    type: String,
    required: true,
  },
  successMessage: {
    type: String,
    default: "",
  },
  placeholder: {
    type: String,
    default: "",
  },
  value: {
    type: String,
    default: null,
  },
  readonly: {
    type: Boolean,
    default: false,
  },
  rules: {
    default: undefined,
  },
});
const isPasswordShown = ref(false);
const { value, errorMessage, handleBlur } = useField(
  () => props.name,
  props.rules,
  {
    syncVModel: true,
  }
);
</script>
