import Vue from 'vue/dist/vue'
import EventBus from "../util/EventBus";
import EventTypes from "../util/EventTypes";

Vue.component('tabs', {
    props: {
    },
    data() {
        return {
            tabs: [],
            selectedIndex: 0,
        };
    },
    created() {
        this.selectedIndex = 0;
        this.tabs = this.$children;
    },
    mounted() {
        // activate default
        if (this.tabs.length) {
            this.selectTab(this.selectedIndex);
        }

        EventBus.$on(EventTypes.SELECT_TAB, this.selectTab);
    },
    methods: {
        selectTab(selectedTabIndex) {
            this.selectedIndex = selectedTabIndex;
            this.tabs.forEach((tab, index) => {
                // set status on child
                tab.isSelected = this.selectedIndex === index;
            })
        }
    },
    template: `
      <div class="builder-tabs d-flex flex-column">
        <div class="tab-header btn-group">
          <button
              v-for="(tab, index) in tabs"
              class="btn"
              :class="{ 'active': tab.isSelected }"
              @click="selectTab(index)"
              v-html="tab.label"
          >
          </button>
        </div>
        <div class="tab-containers">
          <slot></slot>
        </div>
      </div>
    `,
});