<template>
  <div
    class="vc-horizontal-tabs__nav"
  >
    <div
      v-for="(option, index) in options"
      :key="optionKey(option, index, config)"
      :ref="`horizontalTab-${index}`"
      class="vc-horizontal-tabs__item"
      :class="{
        'is_active': optionKey(option, index, config) === activeTab && !optionDisabled(option, {disabledKey: 'disabled'}),
        'is_disabled': optionDisabled(option, {disabledKey: 'disabled'})
      }"
      :tabindex="optionDisabled(option, {disabledKey: 'disabled'}) ? -1 : 0"
      @click="onClick(option, optionKey(option, index, config))"
      @keyup.enter="onClick(option, optionKey(option, index, config))"
    >
      <div
        class="flex items-center"
      >
        <i
          :class="optionIcon(option, config)"
          class="horizontal-tab-icon icon-lg min-w-4"
        />
        <div
          class="tab-name-content mx-2 tab-name text-base font-medium focus:outline-none"
        >
          {{ optionLabel(option, config) }}
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import optionMethods from '@/mixins/optionMethods.mixin'
import { OptionType } from '@/types/OptionAndConfig.types'
import { KeyAttributeType } from '@/types/VueGeneric.types'

export default defineComponent({
  name: 'VcHorizontalTabNav',
  mixins: [optionMethods],
  props: {
    activeIndex: {
      type: String,
      required: true
    }
  },
  emits: ['change', 'indexOfActiveElement'],
  data () {
    return {
      activeTab: '' as KeyAttributeType | unknown | undefined,
      updateInterval: 0 as number | undefined
    }
  },
  watch: {
    modelValue (val) {
      this.activeTab = val
    }
  },
  mounted () {
    this.activeTab = this.activeIndex
  },
  methods: {
    onClick (option: OptionType, item: KeyAttributeType): void {
      this.activeTab = item
      this.$emit('change', option)
      this.$emit('indexOfActiveElement', item)
    }
  }
})
</script>

<style lang="scss" scoped>
.vc-horizontal-tabs__nav {
  @apply h-full flex justify-start;
  .vc-horizontal-tabs__item {
    @apply p-4 cursor-pointer select-none relative text-sm inline-flex items-center text-secondary-actions outline-none font-medium leading-none bg-default-bg shadow-card rounded-horizontal-tab-item;
    [dir='ltr'] &:not(:last-child) {
      @apply mr-4;
    }
    [dir='rtl'] &:not(:last-child) {
      @apply ml-4 mr-0;
    }
    &:not(.is_disabled) {
        @apply text-black;
    }
    &.is_active {
      @apply transition-colors duration-300 ease-in-out text-sm bg-white shadow-card rounded-horizontal-tab-item;
    }
    &:not(.is_disabled) .horizontal-tab-icon {
      @apply text-primary-actions;
    }
    &.is_disabled {
      @apply cursor-not-allowed select-none opacity-50 pointer-events-none;
    }
    &:not(.is_disabled):not(.is_active):hover {
      @apply text-primary-actions transition duration-300 ease-in-out;
    }
    &:not(.is_disabled):not(.is_active):hover &--text {
      @apply text-primary-actions transition duration-300 ease-in-out;
    }
    &:not(.is_active):focus-visible {
      @apply text-primary-actions transition duration-300 ease-in-out outline-none;
    }
  }
}
</style>
