<template>

  <div class="position-relative">

    <input

      :class="[{ 'pe-5': type === 'password' }, 'form-control p-2 rounded-3']"

      :type="inputType"

      :id="label ? slugify(label) : null"

      v-model="inputValue"

      v-bind="$attrs"

    />

    <CustomButton

      type="button"

      transparent

      class="position-absolute end-0 top-50 translate-y--50"

      v-if="type === 'password'"

      @click="togglePasswordVisibility"

    >

      <RemixIcon :icon="showPassword ? 'eye-off-line' : 'eye-line'" />

    </CustomButton>

  </div>

</template>

<script>

import RemixIcon from '../components/RemixIcon.vue';

import CustomButton from '../components/CustomButton.vue';

export default {

  components: {

    RemixIcon,

    CustomButton

  },

  props: {

    type: {

      type: String,

      default: 'text',

    },

    label: {

      type: String,

      default: '',

    },

  },

  data() {

    return {

      inputValue: '',

      showPassword: false,

    };

  },

  computed: {

    inputType() {

      return this.showPassword ? 'text' : this.type;

    },

  },

  methods: {

    togglePasswordVisibility() {

      this.showPassword = !this.showPassword;

    },

    slugify(str) {

      return str

        .toLowerCase()

        .trim()

        .replace(/[^\w\s-]/g, '')

        .replace(/[\s_-]+/g, '-')

        .replace(/^-+|-+$/g, '');

    },

  },

};

</script>

<style scoped></style>

<template>

  <div class="position-relative">

    <input

      :class="[{ 'pe-5': type === 'password' }, 'form-control p-2 rounded-3']"

      :type="inputType"

      :value="modelValue"

      @input="$emit('update:modelValue', $event.target.value)"

    />

    <CustomButton

      type="button"

      transparent

      class="position-absolute end-0 top-50 translate-y--50"

      v-if="type === 'password'"

      @click="togglePasswordVisibility"

    >

      <RemixIcon :icon="showPassword ? 'eye-off-line' : 'eye-line'" />

    </CustomButton>

  </div>

</template>

<script>

import RemixIcon from '../components/RemixIcon.vue';

import CustomButton from '../components/CustomButton.vue';

export default {

  components: {

    RemixIcon,

    CustomButton

  },

  props: {

    type: {

      type: String,

      default: 'text',

    },

    label: {

      type: String,

      default: '',

    },

    modelValue: {

      type: String,

    }

  },

  emits: ['update:modelValue'],

  data() {

    return {

      inputValue: '',

      showPassword: false,

    };

  },

  computed: {

    inputType() {

      return this.showPassword ? 'text' : this.type;

    },

  },

  methods: {

    togglePasswordVisibility() {

      this.showPassword = !this.showPassword;

    },

  },

};

</script>