export default {
  data() {
    return {
      currentIndex: 0,
      tabs: [],
    };
  },
  mounted() {
    this.updateTabs();
  },
  methods: {
    updateTabs() {
      this.tabs = this.$children.filter(child => child.isTab);
      this.currentIndex = this.tabs.findIndex(tab => tab.localActive);
    },
    setTab(index) {
      this.tabs[this.currentIndex].localActive = false;
      this.tabs[index].localActive = true;

      this.currentIndex = index;
    },
  },
  render(h) {
    const navItems = this.tabs.map((tab, i) =>
      h(
        'li',
        {
          key: i,
          class: tab.localActive ? 'active' : null,
        },
        [
          h(
            'a',
            {
              attrs: {
                href: '#',
              },
              on: {
                click: () => this.setTab(i),
              },
            },
            tab.$slots.title || tab.title,
          ),
        ],
      ),
    );
    const nav = h(
      'ul',
      {
        class: 'nav-links tab-links',
      },
      [navItems],
    );
    const content = h(
      'div',
      {
        class: ['tab-content'],
      },
      [this.$slots.default],
    );

    return h('div', {}, [[nav], content]);
  },
};