<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 setup>
import { reactive, ref, onBeforeMount, toRefs, provide, useSlots } from "vue";

const slots = useSlots();

const props = defineProps({
  modelValue: {
    type: String,
    default: "",
  },
});

const getActiveName = provide("activeName", () => {
  return props.modelValue;
});
const getIsTabs = provide("isTabs", true);

const emit = defineEmits(["update:modelValue"]);

const isTabs = ref(true);

const calcTabs = () => {
  let tabSlots = [];
  if (slots.default()) {
    tabSlots = slots
      .default()
      .filter((vnode) => vnode.type && vnode.type.__name === "bg-tab")
      .map((vnode) => vnode.props);
  }

  return tabSlots;
};
const changeActiveName = ({ name }) => {
  emit("update:modelValue", name);
};
</script>
