<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'}`"><!-- default -> width: 20rem (w-80) -->
        <t-input
          v-model="vModel"
          :name="name"
          :type="type"
          :variant="variant"
          :required="required"
          :placeholder="placeholder"
          :ref="inputRef"
          :class="`w-full mb-2 ${showValidatedIndicator ? 'pr-10' : ''} ${inputClass}`"
        />
        <!-- Loading icon -->
        <transition
          enter-active-class="_veryfast animated fadeIn"
          leave-active-class="_veryfast animated fadeOut"
        >
          <v-icon
            v-if="showValidatedIndicator && isLoading"
            name="spinner"
            class="absolute top-4 right-4"
            spin
          />
        </transition>
        <!-- Validated status icon -->
        <transition
          enter-active-class="_veryfast animated fadeIn"
          leave-active-class="_veryfast animated fadeOut"
        >
          <v-icon
            v-if="showValidatedIndicator && !isLoading"
            :name="validatedStatus ? 'check' : 'times'"
            :class="`absolute top-4 right-4 ${validatedStatus ? 'text-success' : 'text-error'}`"
          />
        </transition>
      </div>
    </slot>

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

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

  </div>
</template>

<script>
import BaseInput from './BaseInput'
/**
 * Input component
 */
export default {
  name: 'Input',
  extends: BaseInput,
  data () {
    return {
      timeOut: null,
      isLoading: 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: ''
    },
    /**
     * lazyValidation
     */
    lazyValidation: {
      type: Function,
      default: null
    },
    /**
     * wait
     */
    wait: {
      type: Number,
      default: 1000
    }
  },
  methods: {
    /**
     * waitFor method
     * @return {void}
     */
    waitFor: function () {
      clearTimeout(this.timeOut) // Clear timeout
      this.timeOut = setTimeout(async () => {
        this.isLoading = true
        if (this.lazyValidation) await this.lazyValidation()
        this.isLoading = false
      }, this.wait)
    }
  },
  watch: {
    vModel: function (to) {
      this.waitFor()
    }
  }
}
</script>
