<template>
  <div class="vc-vertical-tabs">
    <div class="vc-vertical-tabs__wrapper">
      <div class="vc-vertical-tabs__header">
        <div class="ml-1 mb-2 text-sm font-medium">
          {{ tabsTitle }}
        </div>
        <div class="vc-vertical-tabs__nav-wrapper">
          <vertical-tab-nav
            :options="options"
            :config="config"
            :active-index="modelValue"
            @index-of-active-element="getActiveIndex"
            @change="change"
          />
        </div>
      </div>
      <div class="vc-vertical-tabs__content-wrapper">
        <div class="mb-2 text-sm font-medium">
          {{ tabTitle }}
        </div>
        <div class="vc-vertical-tabs__content pt-2">
          <div class="vc-vertical-tabs__content--content overflow-y-auto h-full">
            <slot :name="slotName" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

export default defineComponent({
  name: 'VcVerticalTabs',
  components: { VerticalTabNav },
  mixins: [optionMethods],
  props: {
    modelValue: {
      type: String,
      required: true
    },
    tabTitle: {
      type: String,
      default: ''
    },
    tabsTitle: {
      type: String,
      default: ''
    }
  },
  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">
$max-height: 300px;

.vc-vertical-tabs {
  @apply box-border max-h-inherit bg-transparent max-w-full h-fit-content;
  &__wrapper {
    @apply flex flex-row w-full;
  }
  &__header {
    @apply mr-0.375 h-auto mb-0 overflow-hidden min-w-xs relative;
  }
  &__nav-wrapper {
    @apply overflow-y-auto pr-0.5;
    max-height: $max-height;
  }
  &__content-wrapper {
    @apply flex-grow h-auto overflow-hidden;
  }
  &__content {
    @apply h-full;
    max-height: $max-height;
    &--content {
      @apply border border-secondary-actions rounded-md p-4 bg-default-bg;
    }
  }

  ::-webkit-scrollbar {
    @apply w-1.5 h-1.5;
  }
  ::-webkit-scrollbar-track {
    @apply rounded-lg shadow-vertical-tab-scroll mt-2;
  }
  ::-webkit-scrollbar-thumb {
    @apply bg-secondary-actions rounded-0.875;
  }
  ::-webkit-scrollbar-thumb:hover {
    @apply bg-secondary-actions--focus;
  }
}
</style>
