import { createRouter, createWebHistory } from "vue-router";
import { routerBase } from "../app.config.js";
import HomeView from "../views/HomeView.vue";
import AboutView from "../views/AboutView.vue";
import DebugFrameView from "../views/DebugFrameView.vue";
import SideBarView from "../views/SideBarView.vue";
import SearchByReferenceView from "../views/SearchByReferenceView.vue";
import InteractionsFlowView from "../views/InteractionsFlowView.vue";
import CustomerAccountView from "../views/TelephonyContextView.vue";

const routes = [
  {
    path: "/",
    name: "home",
    components: { default: HomeView, SideBarView: SideBarView },
    props: { default: false, SideBarView: true },
  },
  {
    path: "/about",
    name: "about",
    components: { default: AboutView, SideBarView: SideBarView },
    props: { default: false, SideBarView: true },
  },
  {
    path: "/referenceId",
    name: "referenceId",
    components: { default: SearchByReferenceView, SideBarView: SideBarView },
    props: {
      default: (route) => ({
        sessionIdentifier: route.query._sessionIdentifier,
      }),
    },
  },
  {
    path: "/interactionsFlow",
    name: "interactionsFlow",
    components: { default: InteractionsFlowView, SideBarView: SideBarView },
    props: {
      default: (route) => ({
        sessionIdentifier: route.query._sessionIdentifier,
        username: route.query.username,
      }),
    },
  },
  {
    path: "/telephonyContext",
    name: "telephonyContext",
    components: { default: CustomerAccountView },
    props: {
      default: (route) => ({
        ...route.params,
        ...route.query,
        sessionIdentifier: route.query._sessionIdentifier,
      }),
    },
  },
  {
    path: "/debug",
    name: "debug",
    component: DebugFrameView,
    components: { default: DebugFrameView },
    props: { default: true },
  },
];

console.log(`mounting router on ${routerBase}`);

const router = createRouter({
  history: createWebHistory(),
  base: routerBase,
  routes,
});

export default router;