<template>
  <div ref="tabItemContainer" class="n-tab-item n-w-100">
    <slot v-if="isActive" />
  </div>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "NTabItem",
  inject: {
    selectedValue: {
      from: "selectedValue",
      default: "",
    },
  },
  props: {
    wrapperClass: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      index: 0,
    };
  },
  computed: {
    isActive() {
      const { index, selectedValue } = this;

      return String(index) === String(selectedValue);
    },
  },
  mounted() {
    const current = this.$refs.tabItemContainer;
    let elementPlaceholder = current;
    let count = 0;

    while (elementPlaceholder) {
      count += 1;
      elementPlaceholder = elementPlaceholder.previousElementSibling;
    }

    this.index = count ? count - 1 : count;
  },
});
</script>
