import Vue from 'vue'
import { compile } from '../utils'

import NuxtError from './nuxt-error.vue'

import NuxtChild from './nuxt-child'

export default {
  name: 'Nuxt',
  components: {
    NuxtChild,
    NuxtError
  },
  props: {
    nuxtChildKey: {
      type: String,
      default: undefined
    },
    keepAlive: Boolean,
    keepAliveProps: {
      type: Object,
      default: undefined
    },
    name: {
      type: String,
      default: 'default'
    }
  },
  errorCaptured (error) {
    // if we receive and error while showing the NuxtError component
    // capture the error and force an immediate update so we re-render
    // without the NuxtError component
    if (this.displayingNuxtError) {
      this.errorFromNuxtError = error
      this.$forceUpdate()
    }
  },
  computed: {
    routerViewKey () {
      // If nuxtChildKey prop is given or current route has children
      if (typeof this.nuxtChildKey !== 'undefined' || this.$route.matched.length > 1) {
        return this.nuxtChildKey || compile(this.$route.matched[0].path)(this.$route.params)
      }

      const [matchedRoute] = this.$route.matched

      if (!matchedRoute) {
        return this.$route.path
      }

      const Component = matchedRoute.components.default

      if (Component && Component.options) {
        const { options } = Component

        if (options.key) {
          return (typeof options.key === 'function' ? options.key(this.$route) : options.key)
        }
      }

      const strict = /\/$/.test(matchedRoute.path)
      return strict ? this.$route.path : this.$route.path.replace(/\/$/, '')
    }
  },
  beforeCreate () {
    Vue.util.defineReactive(this, 'nuxt', this.$root.$options.nuxt)
  },
  render (h) {
    // if there is no error
    if (!this.nuxt.err) {
      // Directly return nuxt child
      return h('NuxtChild', {
        key: this.routerViewKey,
        props: this.$props
      })
    }

    // if an error occurred within NuxtError show a simple
    // error message instead to prevent looping
    if (this.errorFromNuxtError) {
      this.$nextTick(() => (this.errorFromNuxtError = false))

      return h('div', {}, [
        h('h2', 'An error occurred while showing the error page'),
        h('p', 'Unfortunately an error occurred and while showing the error page another error occurred'),
        h('p', `Error details: ${this.errorFromNuxtError.toString()}`),
        h('nuxt-link', { props: { to: '/' } }, 'Go back to home')
      ])
    }

    // track if we are showing the NuxtError component
    this.displayingNuxtError = true
    this.$nextTick(() => (this.displayingNuxtError = false))

    return h(NuxtError, {
      props: {
        error: this.nuxt.err
      }
    })
  }
}