import { createApp } from 'vue';
import 'bootstrap/dist/js/bootstrap';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
import { useMainStore } from '@/store';
import baseMixin from '@/mixins/base-mixin';
import { createPinia } from 'pinia';
import { vMaska } from 'maska';
import LoadScript from 'vue-plugin-load-script';

import analyticsMixin from '@/mixins/analytics-mixin';
import experimentMixin from '@/mixins/experiment-mixin';
import defineGlobalRules from '@/helpers/global-rule-definer';
import router from './router';
import App from './App.vue';

import Logger from "@/helpers/logger";
import bailoutMessage from '@/constants/bailoutMessage';
import applicationConfig from '@/constants/application-config';
// Instantiate global logging object
global.$logger = new Logger();

// Vue App Setup
const vueApp = createApp(App);

vueApp.config.compilerOptions.isCustomElement = (tag) =>
    (tag === 'siteSubHeader'
            || tag === 'ServicePackages'
            || tag === 'servicePackageQuestion');

// Pinia
const pinia = createPinia();
vueApp.use(pinia);
pinia.use(piniaPluginPersistedstate);
useMainStore().populateInitialState(false);

// Additional Vue items to setup
vueApp.use(router);
vueApp.use(LoadScript);

vueApp.directive('maska', vMaska);
vueApp.mixin(baseMixin);
vueApp.mixin(analyticsMixin);
vueApp.mixin(experimentMixin);

function getPageName(vm) {
    return vm.$root.getPageNameByQueryString();
  }
// Vue Error Handling
vueApp.config.errorHandler = (err, vm, info) => {
    const pageName = getPageName(vm);
    global.$logger.logError(`[${pageName}] ${info}`, err);
    if (applicationConfig.BAILOUT_ON_APPLICATION_ERROR) {
        router.navigateBailout(bailoutMessage.applicationError(`[${pageName}] ${info}: ${err.message}\n${err.stack}`));
    }
};

// Vue Router Error Handling
router.onError((err) => {   
    global.$logger.logError('Router Error:', err);
    if (applicationConfig.BAILOUT_ON_ROUTER_ERROR) {
        router.navigateBailout(bailoutMessage.routerError(`${err.message}\n${err.stack}`));
    }
});

global.bailoutOnAxiosError = (error) => {
    if (applicationConfig.BAILOUT_ON_API_ERROR) {
        router.navigateBailout(bailoutMessage.apiError(error));
    }
}

vueApp.mount('#app');

// define global rules
defineGlobalRules();