<template>
  <component
    :is="to ? (to.includes('http') ? 'a' : 'router-link') : 'div'"
    :to="to || '#'"
    :href="to || '#'"
    v-if="!hidden"
    class="nv-tab"
    :class="{
      active: parent.modelValue === id,
      dark: parent.dark,
      disabled: disabled,
      grow: parent.grow,
      vertical: parent.vertical,
    }"
    :style="{ minWidth: `${parent.minWidth}px` }"
    @click="click()"
  >
    <div
      class="nv-tab__link"
      :class="[
        customClass,
        parent.customClass,
        { left: parent.left, right: parent.right },
      ]"
    >
      <NvIcon v-if="icon" :icon="icon" class="nv-tab__icon" />
      <span
        v-if="$slots.default || title"
        class="nv-tab__title"
        :class="{
          icon: icon,
          'icon-right': iconRight,
          'no-wrap': parent.noWrap,
        }"
      >
        {{ title }}
        <slot />
      </span>
      <NvIcon v-if="iconRight" :icon="iconRight" class="nv-tab__icon-right" />
    </div>
  </component>
</template>

<script>
export default {
  name: "NvTab",

  props: {
    customClass: { type: String, default: "" },
    disabled: Boolean,
    hidden: Boolean,
    icon: { type: String, default: "" },
    iconRight: { type: String, default: "" },
    title: { type: String, default: "" },
    to: { type: String, default: "" },
    value: { type: [Boolean, Number, String], default: undefined },
  },

  data: () => {
    return {
      id: null,
      parent: null,
    };
  },

  created() {
    this.getParent();
    this.id = this.parent.items.length;
    this.parent.items.push(this.id);
  },

  methods: {
    click() {
      if (this.disabled || this.to) return;
      this.parent.change(this.id);
    },

    getParent() {
      let component = null;
      let parent = this.$parent;
      while (parent && !component) {
        if (parent.$options.name === "NvTabs") {
          component = parent;
        }
        parent = parent.$parent;
      }
      this.parent = component;
    },
  },
};
</script>

<style lang="scss" scoped>
.nv-tab {
  @apply cursor-pointer flex justify-center shrink-0 text-subline hover:text-black;

  &__link {
    @apply flex grow items-center justify-center text-center mx-4 py-2 relative;

    &.left {
      @apply justify-start text-left;
    }

    &.right {
      @apply justify-end text-right;
    }
  }

  &__title {
    &.no-wrap {
      white-space: nowrap;
    }
  }

  &.active {
    @apply text-primary;

    .nv-tab__link {
      @apply after:absolute after:bg-primary after:bottom-0 after:content-[''] after:h-[3px] after:left-0 after:rounded-tl-full after:rounded-tr-full after:w-full;
    }

    &.vertical {
      .nv-tab__link {
        @apply after:h-full after:w-[3px] after:bottom-auto after:top-0 after:left-auto after:right-0 after:rounded-tr-none after:rounded-bl-full;
      }
    }
  }

  &.dark:not(.active) {
    @apply text-white;

    &.disabled {
      @apply text-white text-white/50 hover:text-white/50;
    }
  }
  &.disabled {
    @apply cursor-default text-black text-black/20 hover:text-black/20;
  }

  &.vertical {
    @apply px-0;

    .nv-tab__link {
      @apply mx-0 px-4 w-full;
    }
  }
}
</style>
