const store = createStore()

// data populated from server
store.replaceState(window.__INITIAL_STATE__)
const router = createRouter()

const routerReady = new Promise(resolve => {
  router.onReady(resolve)
}).then(() => {
  router.getMatchedComponents(router.currentRoute).forEach(component => {
    if (component.lazyData) {
      component.lazyData(store, router.currentRoute, {})
    }
  })

  router.beforeResolve((to, from, next) => {
    const matched = router.getMatchedComponents(to)
    const permissionPromises = matched.map(component => {
      if (component.permissions) {
        return component.permissions(store, to, from)
      }
      return Promise.resolve()
    })

    Promise.all(permissionPromises)
      .then(() => {
        next()
      })
      .catch(err => {
        console.log(err)
        next(err)
      })
  })

  router.afterEach((to, from) => {
    const matched = router.getMatchedComponents(to)

    matched.forEach(component => {
      if (component.criticalData) {
        component.criticalData(store, to, from)
      }
    })

    matched.forEach(component => {
      if (component.lazyData) {
        component.lazyData(store, to, from)
      }
    })
  })
})

const app = createApp(store, router)
routerReady.then(() => {
  app.$mount('#app')
})