// Empty store we can register our modules into
const store = new Vuex.Store({});

// Module to be used for the /product/:slug route
const productModule = {
  namespaced: true,
  // State must be a function so we can re-use this module across multiple routes
  state: () => ({
    slug: null,
  }),
  mutations: {
    setSlug(state, slug) {
      state.slug = slug;
    },
  },
};

// Homepage component
const HomeRouteComponent = {
  render(h) {
    return h('h1', 'Homepage');
  },
};

function mapInstanceState(getModuleNameFn, mappers) {
    // Create an object of the same shape but with namespaced mapper functions
    const namespacedMappers = {};
    Object.entries(mappers).forEach((entry) => {
        const [name, mapper] = entry;
        // Note: Do not use an arrow function because we do _not_ want to
        // capture the `this` value at this point, we need the runtime 
        // component instance to be the `this` value
        namespacedMappers[name] = function (state) {
            // Determine the namespaced module state
            const namespace = getModuleNameFn(this);
            // "Walk" the state tree step by step,m just in case we have a 
            // deeply nested namespace
            const moduleState = namespace.split('/')
                .reduce((acc, p) => acc[p], state);
            // Call the original mapper function with the moduleState
            return mapper.call(this, moduleState);
        };
    });

    // Pass through our namespaced mappers to the normal mapState function
    return Vuex.mapState(namespacedMappers);
}

const getNamespace = cmp => `product--${cmp.$route.params.slug}`;

// This is the vue-router route-level component rendered for 
// a given product based on the slug, i.e., /product/red-dress 
// or /product/blue-dress
const ProductRouteComponent = {
  // Each instance of this rotue will use the following namespaced 
  // vuex module
  vuex: {
    moduleName: getNamespace,
    module: productModule,
  },
  // This method will load data for the given route into the 
  // namespaced vuex module
  async fetchData(route, store) {
    // Simulate something async
    await new Promise(r => setTimeout(r, 100));
    const namespace = getNamespace({ $route: route });
    store.commit(`${namespace}/setSlug`, route.params.slug);
  },
  computed: {
    ...mapInstanceState(getNamespace, {
      slug: state => state.slug,
    }),
  },
  render(h) {
    return h('h1', `Slug: ${this.slug}`);          
  },
};

const router = new VueRouter({
  routes: [{ 
    path: '/',
    component: HomeRouteComponent,
  }, {
    path: '/product/:slug', 
    component: ProductRouteComponent,
  }]    
});

router.onReady(() => {
  router.beforeResolve(async (to, from, next) => {
    // Note this is a simplistic approach for example purposes.  In 
    // a real-world app you will need to do some comparisons between 
    // prior routes and avoid double-registering modules
    
    // Find out the components that match our destination route.  This 
    // will only be more than one component if you re using nested routes
    const matched = router.getMatchedComponents(to);

    // Register moules for each destination component
    matched
      .filter(cmp => cmp.vuex)
      .forEach(cmp => store.registerModule(
        cmp.vuex.moduleName({ $route: to }), 
        cmp.vuex.module,
      ));
        
    // Execute fetchData for each destination component
    const promises = matched
      .filter(cmp => cmp.fetchData)
      .map(cmp => cmp.fetchData(to, store));

    await Promise.all(promises);
    next();
  });
});          

new Vue({
  el: '#app',
  router,
  store,
});