<template>
  <label :class="['field', `field-${size}`, classObject]">
    <span v-if="label" class="field-label">{{ label }}</span>

    <span v-if="description" class="field-description" v-html="description"></span>

    <div v-if="error" class="field-error-container">
      <i class="field-error-icon fas fa-exclamation-circle"></i>
      <div class="field-error-message">
        {{ error }}
      </div>
    </div>

    <div v-if="valid" class="field-valid-container">
      <i class="field-valid-icon fas fa-check-circle"></i>
    </div>

    <div v-if="isSelect" class="input-group select-input" >
      <input
       v-if="isSelect"
       type="text"
       autocomplete="off"
       :name="name"
       class="field-entry form-control "
       v-imask="mask ? maskOptions[mask] : null"
       :value="value"
       v-on="inputListeners"
       ref="input"
      >
      <span class="input-group-btn">
          <button @click="inputFocus" class="btn btn-primary" type="button">
            <i class="fas fa-angle-down "></i>
          </button>
      </span>
    </div>
    <DatePicker
      v-else-if="isDatePicker"
      :disabled="disabled"
      v-bind="$attrs"
      @input="(value) => { $emit('input', value) }"
    >
      <template #input>
         <input
          type="text"
          :name="name"
          class="field-entry"
          v-imask="mask ? maskOptions[mask] : null"
          :value="value"
          v-on="inputListeners"
          ref="input"
        >
      </template>
    </DatePicker>
    <input
      v-else
      :type="type"
      :name="name"
      :class="type === 'color' ? 'field-color' : 'field-entry'"
      :disabled="disabled"
      v-bind="$attrs"
      ref="input"
      v-imask="mask ? maskOptions[mask] : null"
      :value="value"
      v-on="inputListeners"
    >
  </label>
</template>

<style src="../../identity.css"></style>
<style src="./datepicker.css"></style>
<style scoped src="./styles.css" /></style>

<script src="./scripts.js"></script>