<template>
  <!-- Input container -->
  <div :class="`_input-container ${fluid ? 'w-full' : ''}`">

    <!-- Slot: label -->
    <slot name="label">
      <div v-if="label.length > 0" :class="`_input-label ${labelClass}`">
        <label :for="name">{{ label }}</label>
        <span v-if="required"> *</span>
      </div>
    </slot>

    <!-- Slot: input -->
    <slot name="input">
      <div :class="`_input ${fluid ? 'w-full' : 'w-80'}`">
        <t-input
          v-model="vModel"
          :name="name"
          :type="passwordVisibility ? 'text' : 'password'"
          :variant="variant"
          :required="required"
          :placeholder="placeholder"
          :ref="inputRef"
          :class="`mb-2 pr-10 ${fluid ? 'w-full' : 'w-80'} ${inputClass}`"
        />
        <v-icon
          :name="passwordVisibility ? 'eye-slash' : 'eye'"
          @click="passwordVisibility = !passwordVisibility"
          class="cursor-pointer text-primary absolute top-4 right-4"
        />
      </div>
    </slot>

    <!-- Slot: description -->
    <slot name="description">
      <!-- Description -->
      <div
        v-if="description.length > 0"
        :class="`_input-description ${descriptionClass} ${fluid ? 'w-full' : ''}`"
      >
        <p>{{ description }}</p>
      </div>
    </slot>

    <!-- Slot: error -->
    <slot name="error">
    <!-- Error message -->
      <div
        v-if="error.length > 0"
        :class="`_input-error ${errorClass} ${fluid ? 'w-full' : ''}`"
      >
        <p>{{ error }}</p>
      </div>
    </slot>

  </div>
</template>

<script>
import BaseInput from './BaseInput'
/**
 * InputPassword component
 */
export default {
  name: 'InputPassword',
  extends: BaseInput,
  data () {
    return {
      passwordVisibility: false
    }
  },
  props: {
    /**
     * value (to use v-model directive)
     * See -> https://vuejs.org/v2/guide/components-custom-events.html#Customizing-Component-v-model
     */
    value: {
      type: String,
      default: ''
    }
  }
}
</script>

<style lang="scss">
// Do logic
</style>
