<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 mb-2 ${inputClass} ${fluid ? 'w-full' : ''}`">
        <!-- Button -->
        <Button
          :variant="variant"
          @click.native="handleButtonClick"
          inline
        >
          <v-icon name="upload"/> {{ $t('global.modify') | capitalize }}
        </Button>

        <!-- Uploaded file name -->
        <div v-if="vModel" class="inline-block ml-4">{{ $t('global.file') | capitalize }}: {{ vModel.name }}</div>

        <!-- Hidden input -->
        <input
          class="hidden"
          type="file"
          :name="name"
          :ref="inputRef"
          placeholder="Choose a file or drop it here..."
          drop-placeholder="Drop file here..."
          @change="updateFile"
        />
      </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'
/**
 * InputFile component
 */
export default {
  name: 'InputFile',
  extends: BaseInput,
  props: {
    /**
     * Override 'value' prop
     * See -> ./BaseInput.vue
     */
    value: {
      type: File, // Because input value is null or File
      default: null
    }
  },
  methods: {
    /**
     * Update input value with first file
     * @return {void}
     */
    updateFile: function () {
      this.vModel = this.$refs[this.inputRef].files[0]
    },
    /**
     * Handle click on input button.
     * @param {Object} evt - The event payload
     * @returns {void}
     */
    handleButtonClick (evt) {
      evt.preventDefault()
      // Simulate click on hidden input
      this.$refs[this.inputRef].click()
    }
  }
}
</script>
