<template>
  <div
    class="vc-vertical-tabs__nav"
  >
    <div
      v-for="(option, index) in options"
      :key="optionKey(option, index, config)"
      :class="{
        'is_active': optionKey(option, index, config) === activeTab && !optionDisabled(option, {disabledKey: 'disabled'}),
        'is_disabled': optionDisabled(option, {disabledKey: 'disabled'})
      }"
      class="vc-vertical-tabs__item"
      :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="vertical-tab-icon icon-base min-w-4"
        />
        <div
          class="tab-name-content mx-2 tab-name text-sm 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: 'VerticalTabNav',
  mixins: [optionMethods],
  props: {
    activeIndex: {
      type: String,
      required: true
    }
  },
  emits: ['change', 'indexOfActiveElement'],
  data () {
    return {
      activeTab: '' as KeyAttributeType | unknown | 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-vertical-tabs__nav {
  @apply h-full;
  .vc-vertical-tabs__item {
    @apply mx-1 my-2;
  }
  .vc-vertical-tabs__item {
    @apply outline-none leading-40px relative cursor-pointer h-10 bg-white rounded-sm select-none font-normal text-default-text text-sm transition-all duration-500 ease-in-out pl-5 pr-5 shadow-vertical-tab-item;
    .vertical-tab-icon {
      @apply text-active-elements;
    }
    &:focus-visible {
      @apply outline-none;
    }

    &.is_active, &:hover, &:focus-visible {
      @apply bg-active-elements text-white;
      .vertical-tab-icon {
        @apply transition-colors duration-500 ease-in-out text-white;
      }
    }
    &.is_disabled {
      @apply cursor-not-allowed opacity-50 pointer-events-none;
    }
  }
}
</style>
