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

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

    <!-- Slot: input -->
    <slot name="input">
      <div :class="`_select ${fluid ? 'w-full' : 'w-80'}`"><!-- default -> width: 20rem (w-80) -->
        <t-select
          v-model="vModel"
          :name="name"
          :variant="variant"
          :placeholder="placeholder"
          :search-box-placeholder="searchBoxPlaceholder"
          :options="options"
          :value-attribute="valueAttribute"
          :text-attribute="textAttribute"
          :clearable="!required"
        />
      </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="`_select-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="`_select-error ${errorClass} ${fluid ? 'w-full' : ''}`">
          <p>{{ error }}</p>
        </div>
      </slot>
    </transition>

  </div>
</template>

<script>
import BaseInput from './BaseInput'
/**
 * Select component
 */
export default {
  name: 'Select',
  extends: BaseInput,
  props: {
    /**
     * value (to use v-model directive)
     * See -> https://vuejs.org/v2/guide/components-custom-events.html#Customizing-Component-v-model
     */
    value: {
      type: [String, Array]
    },
    /**
     * placeholder
     */
    placeholder: {
      type: String,
      default: function () {
        return this.$h.capitalize(this.$t('global.select'))
      }
    },
    /**
     * searchBoxPlaceholder
     */
    searchBoxPlaceholder: {
      type: String,
      default: function () {
        return this.$h.capitalize(this.$t('global.search'))
      }
    },
    /**
     * options
     */
    options: {
      type: [Array, Object]
    },
    /**
     * valueAttribute
     */
    valueAttribute: {
      type: String
    },
    /**
     * textAttribute
     */
    textAttribute: {
      type: String
    }
  }
}
</script>

<style lang="scss">
  ._select-container {
    // @apply dark:text-white;

    ._select-label {
      @apply mb-2;
    }

    ._select {
      @apply relative;
    }

    ._select-description {
      @apply text-sm text-gray-400;
      @apply mb-2;
    }

    ._select-error {
      @apply text-sm @dark:text-@dark-error;
      @apply mb-2;
    }
  }
</style>
