import { route } from 'quasar/wrappers';
import {
    createRouter,
    createMemoryHistory,
    createWebHistory,
    createWebHashHistory,
} from 'vue-router';
import routes from './routes';
import { i18n } from 'src/boot/i18n';
import { useState } from 'src/composables/useState';
import { useSession } from 'src/composables/useSession';
import { useRole } from 'src/composables/useRole';
import { useUserConfig } from 'src/composables/useUserConfig';
import { toLowerCamel } from 'src/filters';

const state = useState();
const session = useSession();
const { t } = i18n.global;

const createHistory = process.env.SERVER
    ? createMemoryHistory
    : process.env.VUE_ROUTER_MODE === 'history'
    ? createWebHistory
    : createWebHashHistory;

const Router = createRouter({
    scrollBehavior: () => ({ left: 0, top: 0 }),
    routes,

    // Leave this as is and make changes in quasar.conf.js instead!
    // quasar.conf.js -> build -> vueRouterMode
    // quasar.conf.js -> build -> publicPath
    history: createHistory(process.env.VUE_ROUTER_BASE),
});

/*
 * If not building with SSR mode, you can
 * directly export the Router instantiation;
 *
 * The function below can be async too; either use
 * async/await or return a Promise which resolves
 * with the Router instance.
 */
export { Router };
export default route(function (/* { store, ssrContext } */) {
    Router.beforeEach(async (to, from, next) => {
        const { isLoggedIn } = session;
        const outLayout = ['Login', 'TwoFactor', 'VerifyEmail'];
        if (!isLoggedIn() && !outLayout.includes(to.name)) {
            return next({ name: 'Login', query: { redirect: to.fullPath } });
        }

        if (isLoggedIn()) {
            const stateRoles = state.getRoles().value;
            if (stateRoles.length === 0) {
                await useRole().fetch();
                await useUserConfig().fetch();
            }
            const matches = to.matched;
            const hasRequiredRoles = matches.every((route) => {
                const meta = route.meta;
                if (meta && meta.roles) return useRole().hasAny(meta.roles);
                return true;
            });

            if (!hasRequiredRoles) {
                return next({ path: '/' });
            }
        }

        next();
    });

    Router.afterEach((to) => {
        let title = t(`login.title`);

        const matches = to.matched;
        let moduleName;
        if (matches && matches.length > 1) {
            const module = matches[1];
            const moduleTitle = module.meta && module.meta.title;
            moduleName = toLowerCamel(module.name);
            if (moduleTitle) {
                title = t(`${moduleName}.pageTitles.${moduleTitle}`);
            }
        }

        const childPage = to.meta;
        const childPageTitle = childPage && childPage.title;
        if (childPageTitle && matches.length > 2) {
            if (title != '') title += ': ';

            const pageTitle = t(`${moduleName}.pageTitles.${childPageTitle}`);
            const idParam = to.params && to.params.id;
            const idPageTitle = `${idParam} - ${pageTitle}`;
            const builtTitle = idParam ? idPageTitle : pageTitle;

            title += builtTitle;
        }

        document.title = title;
    });

    return Router;
});