<template>
  <div class="pui-tabs" :class="[type, {
    'is-fullwidth': fullwidth,
    'is-centered': centered,
    'is-right': right,
  }]">
    <ul>
      <li
        v-for="(item, itemIndex) in items" 
        :key="itemIndex"
        :disabled="item.disabled"
        :class="{'is-active': itemIndex === activeTabIndex}"
        @click="selectTab(itemIndex)"
      >
        <a v-if="item.label">
          <span class="pui-icon left" v-if="item.icon">
            <i :class="item.icon"></i>
          </span>
          <span>{{ item.label }}</span>
        </a>
        <a v-else-if="item.icon">
          <span class="pui-icon is-medium">
            <i :class="item.icon"></i>
          </span>
        </a>
      </li>
    </ul>
    <slot />
  </div>
</template>

<script>
export default {
  name: "PTabs",
  props: {
    value: Number,
    fullwidth: Boolean,
    centered: Boolean,
    right: Boolean,
    type: String,
  },
  data() {
    return {
      items: [],
      activeTabIndex: this.value || 0,
    }
  },
  methods: {
    selectTab(tabIndex) {
      if (!this.items[tabIndex].disabled) {
        this.activeTabIndex = tabIndex;
        this.$emit("input", tabIndex);
      }
    },
    renderTabContent() {
      this.items.forEach((tab, index) => {
        tab.isActive = (index === this.activeTabIndex)
      })
    }
  },
  mounted() {
    this.renderTabContent();
  },
  created() {
    this.items = this.$children
  },
  watch: {
    value(value) {
      this.activeTabIndex = value;
    },
    activeTabIndex(activeTabIndex) {
      this.renderTabContent();
    }
  },
};
</script>