<template>
  <div class="_tab-view">

    <!-- Header -->
    <div class="_tab-view-header">

      <!-- Tab buttons -->
      <ul class="_tab-view-header-tabs">
        <li
          v-for="tab in tabNames"
          :key="tab"
          :ref="`header-tab-${tab}`"
          :class="`
            _tab-view-header-tab
            ${currentTab === tab ? '_tab-view-header-current-tab' : ''}
            ${stack ? '' : 'flex-auto'}
            ${tabs[tab] ? tabs[tab].disabled ? '_tab-view-header-disabled-tab' : '' : ''}
          `"
          @click="switchToTab(tab)"
          @mouseover="hoverTab = tab"
          @mouseleave="hoverTab = null"
        >
          <slot :name="`header_${tab}`">{{ tabs[tab] ? tabs[tab].title : tab }}</slot>
        </li>
      </ul>

      <!-- Bottom bar -->
      <div class="_tab-view-header-b-bar">
        <!-- Lowlight bar -->
        <div
          class="_tab-view-header-b-bar-lowlight"
          :style="`
            width: ${computeTabWidth(hoverTab) || computeTabWidth(currentTab)};
            left: ${computeTabOffset(hoverTab) || computeTabOffset(currentTab)};
          `"
        ></div>
        <!-- Highlight bar -->
        <div
          class="_tab-view-header-b-bar-highlight"
          :style="`
            width: ${computeTabWidth(currentTab) || '100%'};
            left: ${computeTabOffset(currentTab)};
          `"
        ></div>
      </div>

    </div>

    <!-- Tab content -->
    <div class="_tab-view-content">

      <!-- Use transition-group here to trigger transition depending on current tab -->
      <transition-group name="_tab-transition" tag="div">
        <div v-for="tab in [ currentTab ]" :key="tab" class="_tab-view-content-item">
          <slot :name="tab" :switchToTab="switchToTab"></slot><!-- Dynamic slot -->
        </div>
      </transition-group>

    </div>

  </div>
</template>

<script>
/**
 * TabView component
 */
export default {
  name: 'TabView',
  data () {
    return {
      currentTab: '', // String, important!
      hoverTab: null
    }
  },
  props: {
    /**
     * Tabs
     *
     * Object like:
     * ```javascript
     * {
     *   tab1: {
     *     title: String
     *   },
     *   tab2: {
     *     title: String
     *   },
     *   ...
     * }
     * ```
     */
    tabs: {
      type: [Object, Array],
      default: function () {
        return {}
      }
    },
    /**
     * Index of default tab to display when component is mounted (default 0: first tab).
     */
    defaultTab: {
      type: String,
      default: function () {
        return this.tabs instanceof Array ? this.tabs[0] : Object.keys(this.tabs)[0]
      }
    },
    /**
     * stack
     * stack header tabs to left or right
     */
    stack: {
      type: String,
      default: null
    }
  },
  computed: {
    /**
     * Return tab names
     */
    tabNames: function () {
      return this.tabs instanceof Array ? this.tabs : Object.keys(this.tabs)
    }
  },
  methods: {
    /**
     * switchToTab
     * @description Switch to tab '<tab>'
     * @returns {void}
     */
    switchToTab (tab) {
      this.currentTab = tab
      return true
    },
    /**
     * computeTabWidth
     * @return {string}
     */
    computeTabWidth (tab) {
      const width = this.$refs[`header-tab-${tab}`]
        ? this.$refs[`header-tab-${tab}`][0].clientWidth + 'px'
        : false
      return width
    },
    /**
     * computeTabOffset
     * @return {string}
     */
    computeTabOffset (tab) {
      const offset = this.$refs[`header-tab-${tab}`]
        ? this.$refs[`header-tab-${tab}`][0].offsetLeft + 'px'
        : false
      return offset
    }
  },
  mounted () {
    // Init currentTab
    this.switchToTab(this.defaultTab)
  }
}
</script>

<style lang="scss">
._tab-view {
  @apply w-full;

  ._tab-view-header {
    @apply w-full;
    @apply mb-8;

    ._tab-view-header-tabs {
      @apply flex;
      // @apply justify-center;
      @apply relative;

      ._tab-view-header-tab {
        @apply text-center;
        @apply cursor-pointer;
        @apply p-4;
      }

      ._tab-view-header-current-tab {
        //
      }

      ._tab-view-header-disabled-tab {
        @extend ._tab-view-header-tab;
        @apply pointer-events-none;
        @apply text-gray-400;
      }
    }

    ._tab-view-header-b-bar {
      @apply relative;
      @apply w-full;
      @apply h-1;
      @apply bg-gray-100;
      @apply @dark:bg-@dark-primary;
      @apply rounded-sm;

      ._tab-view-header-b-bar-lowlight {
        @apply relative;
        @apply bg-@dark-primary;
        @apply h-1;
        @apply rounded-sm;
        @apply opacity-50;
        transition: all 250ms;
      }

      ._tab-view-header-b-bar-highlight {
        @apply absolute;
        @apply bg-@dark-primary;
        @apply top-0;
        @apply h-1;
        @apply rounded-sm;
        transition: all 250ms;
      }
    }
  }

  ._tab-view-content {
    ._tab-transition-enter,
    ._tab-transition-leave-to {
      opacity: 0;
    }

    ._tab-transition-enter-active {
      opacity: 0;
      animation: fadeIn;
      animation-duration: 250ms;
      animation-delay: 260ms; // Important !
    }

    ._tab-transition-leave-active {
      animation: fadeOut;
      animation-duration: 250ms;
    }
  }
}
</style>
