<template>
  <div
    class="vc-radio-tabs__nav"
  >
    <div
      v-for="(option, index) in options"
      :key="optionKey(option, index, config)"
      :ref="`radioTab-${index}`"
      class="vc-radio-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), index)"
      @keyup.enter="onClick(option, optionKey(option, index, config), index)"
    >
      <div
        class="flex items-center"
      >
        <i
          :class="optionIcon(option, config)"
          class="radio-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
      ref="bottomUnderLine"
      class="bottom-underline"
    />
  </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: 'VcRadioTabNav',
  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
    const allKeys: KeyAttributeType[] | unknown[] | undefined[] = Object.values(this.options).map((el, index) => typeof el === 'object' && this.optionKey(el, index, this.config))
    const activeElIndex = allKeys.indexOf(this.activeIndex) !== -1 ? allKeys.indexOf(this.activeIndex) : 0
    this.$nextTick(() => {
      this.updateInterval = window.setInterval(() => this.setUnderLinePositionAndWidth(activeElIndex), 65)
    })
  },
  beforeUnmount () {
    window.clearInterval(this.updateInterval)
  },
  methods: {
    onClick (option: OptionType, item: KeyAttributeType, index: number): void {
      this.activeTab = item
      this.$emit('change', option)
      this.$emit('indexOfActiveElement', item)
      this.$nextTick(() => {
        window.clearInterval(this.updateInterval)
        this.setUnderLinePositionAndWidth(index)
      })
    },
    setUnderLinePositionAndWidth (index: number) {
      const activeTabPane = this.$refs[`radioTab-${index}`] as HTMLElement
      const width = activeTabPane.getBoundingClientRect().width
      const offsetLeft = activeTabPane.offsetLeft

      const bottomUnderline = this.$refs.bottomUnderLine as HTMLElement
      bottomUnderline.style.width = `${width}px`
      bottomUnderline.style.left = `${offsetLeft}px`
    }
  }
})
</script>

<style lang="scss" scoped>
.vc-radio-tabs__nav {
  @apply h-full flex justify-center px-14;
  .vc-radio-tabs__item:not(:nth-last-child(2)) {
    @apply mr-20;
  }
  .vc-radio-tabs__item {
    @apply pl-3 pr-3 pt-5 cursor-pointer select-none relative text-sm inline-flex items-center text-secondary-actions outline-none font-medium leading-none;

    [dir='rtl'] &:not(:nth-last-child(2)) {
      @apply ml-20 mr-0;
    }
    &.is_active {
      @apply text-black transition duration-300 ease-in-out text-sm;
    }
    &.is_active .radio-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;
    }
  }
}
.bottom-underline {
  @apply absolute bg-primary-actions -top-px h-0.5;
  transition: .5s cubic-bezier(.25,.8,.5,1);
}

[dir="ltr"] .bottom-underline {
  @apply left-0
}
</style>
