import InkTabBarNode from './InkTabBarNode';
import TabBarTabsNode from './TabBarTabsNode';
import TabBarRootNode from './TabBarRootNode';
import ScrollableTabBarNode from './ScrollableTabBarNode';
import SaveRef from './SaveRef';

export default {
  name: 'ScrollableInkTabBar',
  inheritAttrs: false,
  props: [
    'extraContent',
    'inkBarAnimated',
    'tabBarGutter',
    'prefixCls',
    'navWrapper',
    'tabBarPosition',
    'panels',
    'activeKey',
    'prevIcon',
    'nextIcon',
  ],
  render() {
    const props = { ...this.$props };
    const listeners = this.$listeners;
    return (
      <SaveRef
        children={(saveRef, getRef) => (
          <TabBarRootNode saveRef={saveRef} {...{ props, on: listeners }}>
            <ScrollableTabBarNode saveRef={saveRef} getRef={getRef} {...{ props, on: listeners }}>
              <TabBarTabsNode saveRef={saveRef} {...{ props, on: listeners }} />
              <InkTabBarNode saveRef={saveRef} getRef={getRef} {...{ props, on: listeners }} />
            </ScrollableTabBarNode>
          </TabBarRootNode>
        )}
      />
    );
  },
};