<template>
  <div class="vc-horizontal-tabs">
    <div class="vc-horizontal-tabs__wrapper">
      <div class="vc-horizontal-tabs__header">
        <div class="vc-horizontal-tabs__nav-wrapper">
          <horizontal-tab-nav
            :options="options"
            :config="config"
            :active-index="modelValue"
            @index-of-active-element="getActiveIndex"
            @change="change"
          />
        </div>
      </div>
      <div class="vc-horizontal-tabs__content-wrapper">
        <div class="vc-horizontal-tabs__content">
          <div class="vc-horizontal-tabs__content--content w-full h-full">
            <slot :name="slotName" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

export default defineComponent({
  name: 'VcHorizontalTabs',
  components: { horizontalTabNav },
  mixins: [optionMethods],
  props: {
    modelValue: {
      type: String,
      required: true
    }
  },
  emits: ['change', 'update:modelValue'],
  data () {
    return {
      activeElement: '' as KeyAttributeType | unknown | undefined
    }
  },
  computed: {
    slotName () {
      const allKeys: KeyAttributeType[] | unknown[] | undefined[] = Object.values(this.options).map((el, index) => typeof el === 'object' && this.optionKey(el, index, this.config))
      const validationIsStringAndNotEmpty = typeof this.activeElement === 'string' && this.activeElement
      return validationIsStringAndNotEmpty && allKeys.includes(this.activeElement) ? this.activeElement : ''
    }
  },
  mounted () {
    this.activeElement = this.modelValue
  },
  methods: {
    getActiveIndex (index: KeyAttributeType | unknown | undefined) {
      this.activeElement = index
      this.$emit('update:modelValue', index)
    },
    change (val: OptionType) {
      this.$emit('change', val)
    }
  }
})
</script>

<style lang="scss">
.vc-horizontal-tabs {
  @apply box-border max-h-inherit max-w-full h-fit-content;
  &__wrapper {
    @apply flex flex-col w-full;
  }
  &__header {
    @apply h-auto mb-0 min-w-xs relative;
  }
  &__nav-wrapper {
    @apply w-full;
  }
  &__content-wrapper {
    @apply flex-grow h-auto shadow-vertical-tab-item rounded-horizontal-tab-wrapper relative z-1 bg-white -mt-0;
  }
  &__content {
    @apply h-full;
    &--content {
      @apply px-6 pb-10 pt-6;
    }
  }
}
</style>
