<template>
  <div class="bg-tabs nice-tabs">
    <div class="bg-tabs-nav">
      <ul>
        <li
          v-for="(item, index) in calcTabs()"
          :key="'tab_' + index"
          :class="{
            current: modelValue === item.name,
          }"
          @click="changeActiveName(item, index)"
        >
          {{ item.label }}
        </li>
        <li>
          <!-- empty -->
        </li>
      </ul>
    </div>
    <div class="bg-tabs-content">
      <slot />
    </div>
    <div class="bg-tabs-action" v-if="$slots.action">
      <slot name="action" />
    </div>
  </div>
</template>

<script>
export default {
  name: "BgTabs",
  provide() {
    return {
      getActiveName: () => {
        return this.modelValue;
      },
      getIsTabs: () => {
        return true;
      },
    };
  },
  props: {
    modelValue: {
      type: String,
      default: '',
    },
  },
  emits: ['update:modelValue'],
  data() {
    return {
      isTabs: true,
    };
  },
  methods: {
    calcTabs() {
      let tabSlots = [];

      if (this.$slots.default) {
        tabSlots = this.$slots.default
          .filter(
            (vnode) =>
              vnode.tag &&
              vnode.componentOptions &&
              vnode.componentOptions.Ctor.options.name === "BgTab"
          )
          .map((vnode) => vnode.componentOptions.propsData);
      }

      return tabSlots;
    },
    changeActiveName({ name }) {
      this.$emit("update:modelValue", name);
    },
  },
};
</script>
