import { createWebHistory, createRouter } from "vue-router";
import { storeActions } from "@/constants/store-actions.js";
import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js";
import ComponentTest from "@/layouts/component-test/component-test.vue";
import LoaderDemo from "@/layouts/loader-demo/loader-demo.vue";
import NotFound from "@/layouts/not-found/not-found.vue";
import store from "@/store";

const routes = [
  {
    path: "/:pathMatch(.*)*",
    component: NotFound,
    name: "NotFound",
  },
  {
    path: "/component-test", // This is a temporary route for testing.
    name: "ComponentTest",
    component: ComponentTest,
  },
  {
    path: "/loader-demo", // This is a temporary route for testing.
    name: "LoaderDemo",
    component: LoaderDemo,
  },
  {
    path: "/",
    beforeEnter(to, from, next) {
      // If we have no query string, or we don't have the FmgPage query string.
      if (to.query.fmgPage === undefined) {
        RetainStructureAndGoTo404(to, next);
      } else {
        // If we already have our route, go to it.
        if (router.hasRoute(to.query.fmgPage)) {
          return next({
            name: to.query.fmgPage,
            query: to.query,
          });
        }

        // Get route info for the given url. Names will have a 1:1 relationship with names in the Cms.
        GetRouteInfoFromPageName(to.query.fmgPage)
          .then((routeData) => {
            // Add our dynamic route.
            router.addRoute({
              path: routeData[0].path, // Always the same path, because we control it with query strings.
              name: routeData[0].name,
              component: routeData[0].component,
            });

            // Assign current query string parameters, as well as our fmgPage one.
            next({
              name: routeData[0].name,
              query: Object.assign(to.query, { fmgPage: routeData[0].name }),
            });
          })
          .catch((error) => {
            // If we can't find the route, go to the 404 page.
            RetainStructureAndGoTo404(to, next);

            console.log("error:");
            console.log(error);
          });
      }
    },
  },
];

const router = createRouter({
  history: createWebHistory("/fmg/"),
  routes,
});

// Get route information by page name.
// This will reach out to the Cms and there is a 1:1 relationship between page names and route names.
function GetRouteInfoFromPageName(pageName) {
  return new Promise((resolve, reject) => {
    store
      .dispatch(storeActions.GET_ROUTE_INFO_ACTION, { pageName: pageName })
      .then((response) => {
        // Add our route data and return our array.
        let jsonFromResponse = JSON.parse(response.data.Result);
        let routeData = [];

        Object.keys(jsonFromResponse).forEach((key) => {
          routeData.push({
            path: "/",
            name: `${key}`,
            component: lazyLoadComponent(jsonFromResponse[key].LayoutName),
          });
        });

        resolve(routeData);
      })
      .catch((error) => {
        reject(error);
      });
  });
}

// Go to our 404 page but retain our structure when we go there (path, queryString, hash).
function RetainStructureAndGoTo404(to, next) {
  next({
    name: "NotFound",
    params: { pathMatch: to.path.split("/").slice(1) },
    query: to.query,
    hash: to.hash,
  });
}

export default router;