export default {
  name: 'NuxtChild',
  functional: true,
  props: {
    nuxtChildKey: {
      type: String,
      default: ''
    },
    keepAlive: Boolean,
    keepAliveProps: {
      type: Object,
      default: undefined
    }
  },
  render (_, { parent, data, props }) {
    const h = parent.$createElement

    data.nuxtChild = true
    const _parent = parent
    let depth = 0

    while (parent) {
      if (parent.$vnode && parent.$vnode.data.nuxtChild) {
        depth++
      }
      parent = parent.$parent
    }
    data.nuxtChildDepth = depth

    const listeners = {}
    
    const beforeEnter = listeners.beforeEnter
    listeners.beforeEnter = (el) => {
      if (beforeEnter) {
        return beforeEnter.call(_parent, el)
      }
    }

    let routerView = h('routerView', data)

    if (props.keepAlive) {
      routerView = h('keep-alive', { props: props.keepAliveProps }, [routerView])
    }

    // this needs to be a "transition" or another non-rendering component, 
    // otherwise we will break pages like the charts wizard or the extensions main screen (DOM would render an additional element and break CSS)
    // we can deal with this later once we remove this component and <nuxt /> component
    return h('transition', {
      on: listeners
    }, [routerView])
  }
}