<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-rich-select
          v-model="vModel"
          :name="name"
          :variant="variant"
          :placeholder="placeholder"
          :search-box-placeholder="searchBoxPlaceholder"
          :options="options"
          :value-attribute="valueAttribute"
          :text-attribute="textAttribute"
          :clearable="!required"
          :close-on-select="closeOnSelect"
          :multiple="multiple"
        />
      </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 Select from './Select'
/**
 * RichSelect component
 */
export default {
  name: 'RichSelect',
  extends: Select,
  props: {
    /**
     * closeOnSelect
     */
    closeOnSelect: {
      type: Boolean,
      default: true
    },
    /**
     * multiple
     */
    multiple: {
      type: Boolean,
      default: false
    }
  }
}
</script>
