import { cloneElement } from '../../_util/vnode'
import PropTypes from '../../_util/vue-types'
import BaseMixin from '../../_util/BaseMixin'
function noop () {
}
export default {
  name: 'TabBarRootNode',
  mixins: [BaseMixin],
  props: {
    saveRef: PropTypes.func.def(noop),
    getRef: PropTypes.func.def(noop),
    prefixCls: PropTypes.string.def(''),
    tabBarPosition: PropTypes.string.def('top'),
    extraContent: PropTypes.any,
  },
  methods: {
    onKeyDown (e) {
      this.__emit('keydown', e)
    },
  },
  render () {
    const {
      prefixCls, onKeyDown, tabBarPosition, extraContent,
    } = this
    const cls = {
      [`${prefixCls}-bar`]: true,
    }
    const topOrBottom = (tabBarPosition === 'top' || tabBarPosition === 'bottom')
    const tabBarExtraContentStyle = topOrBottom ? { float: 'right' } : {}
    const children = this.$slots.default
    let newChildren = children
    if (extraContent) {
      newChildren = [
        cloneElement(extraContent, {
          key: 'extra',
          style: {
            ...tabBarExtraContentStyle,
          },
        }),
        cloneElement(children, { key: 'content' }),
      ]
      newChildren = topOrBottom ? newChildren : newChildren.reverse()
    }

    return (
      <div
        role='tablist'
        class={cls}
        tabIndex='0'
        onKeydown={onKeyDown}
        {...{ directives: [{
          name: 'ant-ref',
          value: this.saveRef('root'),
        }] }}
      >
        {newChildren}
      </div>
    )
  },
}