<script>
import {
  Vue, Component, Model, Emit, Prop
} from 'vue-property-decorator';
import itfTab from './Tab';
import itfTabDropdown from './TabDropdown';

export default @Component({
  name: 'itfTabs',
  components: {
    itfTab,
    itfTabDropdown
  },
  provide() {
    return { tabsManager: this }; // do not use Provide from vue-property-decorator
  }
})
class itfTabs extends Vue {
  @Model('input') value;
  @Prop(Boolean) vertical;
  @Prop(Boolean) simple;

  tabNodes;

  render(createElement) {
    const [tabNodes, contents] = parseNodes(this.$slots);
    this.tabNodes = tabNodes;

    let staticClass = 'itf-tabs';
    if (this.vertical) {
      staticClass += ' itf-tabs__vertical';
    }
    if (this.simple) {
      staticClass += ' itf-tabs__simple';
    }

    const list = (this.vertical ? tabNodes : [...tabNodes].reverse());
    const tabs = list.map((node) => createElement('a', this.createTab(node), [node]));
    return createElement('div', { staticClass }, [
      createElement('div', { staticClass: 'itf-tabs-panel d-lg-flex d-none' }, tabs),
      createElement('div', { staticClass: 'itf-tabs-content' }, [createElement(itfTabDropdown, {
        props: {
          nodes: tabNodes
        }
      }), ...contents])
    ]);

    function parseNodes(slots) {
      const items = [];
      const contents = [];
      const nodes = (slots.default || []);

      for (const vnode of nodes) {
        if (!vnode.componentOptions) {
          continue;
        }
        if (vnode.componentOptions.tag.includes('-tab-content')) {
          contents.push(vnode);
          continue;
        }
        if (vnode.componentOptions.tag.includes('-tab')) {
          items.push(vnode);
        }
      }
      return [items, contents];
    }
  }

  isActive(node) {
    const options = (node.componentOptions && node.componentOptions.propsData) || {};
    const id = options.id || Math.random();
    let isActive = this.getValue() === id;
    if (options.active === true || options.active === false) {
      isActive = options.active;
    } else if (options.to) {
      const route = this.$router.resolve(options.to);
      isActive = this.$route.fullPath === (route && route.href);
    }
    return isActive;
  }

  createTab(node) {
    const options = node.componentOptions.propsData || {};
    const id = options.id || node.componentOptions.Ctor.cid;

    let href = 'javascript:;';
    if (options.to) {
      const route = this.$router.resolve(options.to);
      href = route && route.href;
    }

    return {
      staticClass: this.simple ? 'itf-tab__simple' : 'itf-tab',
      class: {
        'active': this.isActive(node)
      },
      attrs: { href },
      on: {
        click: (e) => {
          if (options.to) {
            this.$router.push(options.to);
            e.preventDefault();
          }
          this.setValue(id);
        }
      }
    };
  }

  @Emit('input')
  setValue(value) {
    console.info(value);
    this.tabNodes = null;
  }

  getValue() {
    return this.value;
  }

  scrollToTop() {
    this.$el.scrollIntoView({
      behavior: 'smooth',
    });
  }
}
</script>
