<template>
  <div :class="[wrapperClass, tabsWrapperClasses]">
    <slot />
  </div>
</template>

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

export default defineComponent({
  name: "NTabs",
  provide() {
    return {
      selectedValue: computed(() => this.value),
      updateValue: this.updateParent,
      variant: this.variant,
    };
  },
  props: {
    value: {
      type: [String, Number],
      default: "",
    },
    wrapperClass: {
      type: String,
      default: "",
    },
    variant: {
      type: String,
      default: "primary",
      validator(value) {
        return ["primary", "text"].includes(value);
      },
    },
  },
  computed: {
    tabsWrapperClasses() {
      const { variantClass } = this;
      let classes = "n-tabs-wrapper";

      if (variantClass) {
        classes += variantClass;
      }

      return classes;
    },
    variantClass() {
      const { variant } = this;
      const isValidVariant = ["primary", "text"].includes(variant);

      return isValidVariant ? ` n-tabs-wrapper--${variant}` : "";
    },
  },
  methods: {
    updateParent(value) {
      const providedValue = value;

      this.$emit("input", providedValue);
    },
  },
});
</script>
