<template>
  <div>hello</div>
</template>
<script>
import TabNav from './tab-nav';

export default {
  name: 'ElTabs',

  components: {
    TabNav
  },

  props: {
    type: String,
    activeName: String,
    closable: Boolean,
    addable: Boolean,
    value: {},
    editable: Boolean,
    tabPosition: {
      type: String,
      default: 'top'
    },
    beforeLeave: Function,
    stretch: Boolean
  },

  provide() {
    return {
      rootTabs: this
    };
  },

  data() {
    return {
      currentName: this.value || this.activeName,
      panes: []
    };
  },

  watch: {
    activeName(value) {
      this.setCurrentName(value);
    },
    value(value) {
      this.setCurrentName(value);
    },
    currentName(value) {
      if (this.$refs.nav) {
        this.$nextTick(() => {
          this.$refs.nav.$nextTick(_ => {
            this.$refs.nav.scrollToActiveTab();
          });
        });
      }
    }
  },

  methods: {
    calcPaneInstances(isForceUpdate = false) {
      if (this.$slots.default) {
        const paneSlots = this.$slots.default.filter(
          vnode => vnode.tag && vnode.componentOptions && vnode.componentOptions.Ctor.options.name === 'ElTabPane'
        );
        // update indeed
        const panes = paneSlots.map(({ componentInstance }) => componentInstance);
        const panesChanged = !(
          panes.length === this.panes.length && panes.every((pane, index) => pane === this.panes[index])
        );
        if (isForceUpdate || panesChanged) {
          this.panes = panes;
        }
      } else if (this.panes.length !== 0) {
        this.panes = [];
      }
    },
    handleTabClick(tab, tabName, event) {
      if (tab.disabled) return;
      this.setCurrentName(tabName);
      this.$emit('tab-click', tab, event);
    },
    handleTabRemove(pane, ev) {
      if (pane.disabled) return;
      ev.stopPropagation();
      this.$emit('edit', pane.name, 'remove');
      this.$emit('tab-remove', pane.name);
    },
    handleTabAdd() {
      this.$emit('edit', null, 'add');
      this.$emit('tab-add');
    },
    setCurrentName(value) {
      const changeCurrentName = () => {
        this.currentName = value;
        this.$emit('input', value);
      };
      if (this.currentName !== value && this.beforeLeave) {
        const before = this.beforeLeave(value, this.currentName);
        if (before && before.then) {
          before.then(
            () => {
              changeCurrentName();
              this.$refs.nav && this.$refs.nav.removeFocus();
            },
            () => {
              // https://github.com/ElemeFE/element/pull/14816
              // ignore promise rejection in `before-leave` hook
            }
          );
        } else if (before !== false) {
          changeCurrentName();
        }
      } else {
        changeCurrentName();
      }
    }
  },

  render(h) {
    // let {
    //   type,
    //   handleTabClick,
    //   handleTabRemove,
    //   handleTabAdd,
    //   currentName,
    //   panes,
    //   editable,
    //   addable,
    //   tabPosition,
    //   stretch
    // } = this;
    // const newButton = editable || addable
    //   ? (
    //     <span
    //       class="el-tabs__new-tab"
    //       on-click={ handleTabAdd }
    //       tabindex="0"
    //       on-keydown={ (ev) => { if (ev.keyCode === 13) { handleTabAdd(); }} }
    //     >
    //       <i class="el-icon-plus"></i>
    //     </span>
    //   )
    //   : null;
    // const navData = {
    //   props: {
    //     currentName,
    //     onTabClick: handleTabClick,
    //     onTabRemove: handleTabRemove,
    //     editable,
    //     type,
    //     panes,
    //     stretch
    //   },
    //   ref: 'nav'
    // };
    // const header = (
    //   <div class={['el-tabs__header', `is-${tabPosition}`]}>
    //     {newButton}
    //     <tab-nav { ...navData }></tab-nav>
    //   </div>
    // );
    // const panels = (
    //   <div class="el-tabs__content">
    //     {this.$slots.default}
    //   </div>
    // );
    // return (
    //   <div class={{
    //     'el-tabs': true,
    //     'el-tabs--card': type === 'card',
    //     [`el-tabs--${tabPosition}`]: true,
    //     'el-tabs--border-card': type === 'border-card'
    //   }}>
    //     { tabPosition !== 'bottom' ? [header, panels] : [panels, header] }
    //   </div>
    // );
  },

  created() {
    if (!this.currentName) {
      this.setCurrentName('0');
    }

    this.$on('tab-nav-update', this.calcPaneInstances.bind(null, true));
  },

  mounted() {
    this.calcPaneInstances();
  },

  updated() {
    this.calcPaneInstances();
  }
};
</script>
