import { createApp } from "vue";
import App from "./App.vue";
import router from "./router/router.ts";
import { createPinia } from "pinia";
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
import keycloakService from "./services/keycloak";
import { type AuthStore, useAuthStore } from "@/stores/authStore.ts";

let store: AuthStore;

keycloakService.CallInit(() => {
    try {
        const app = createApp(App);

        // Setup pinia store, allowing user to keep logged in status after refresh
        const pinia = createPinia();
        pinia.use(piniaPluginPersistedstate);
        app.use(pinia);
        store = useAuthStore();
        keycloakService.CallInitStore(store);
        app.use(router);

        app.mount("#app");
    } catch (e) {
        console.error("Error while initiating Keycloak.");
        console.error(e);
        createApp(App).mount("#app");
    }
});

// this shit made by me so i can run the canva vue app
//createApp(App).use(router).mount('#app');

// TODO: fix the comment
/*
function tokenInterceptor () {
    axios.interceptors.request.use(config => {
        const keycloak = useKeycloak()
        if (keycloak.authenticated) {
            // Note that this is a simple example.
            // you should be careful not to leak tokens to third parties.
            // in this example the token is added to all usage of axios.
            config.headers.Authorization = `Bearer ${keycloak.token}`
        }
        return config
    }, error => {
        console.error("tokenInterceptor: Rejected")
        return Promise.reject(error)
    })
}
*/

/*
app.use(VueKeyCloak,{
    onReady: (keycloak) => {
        console.log("Ready !")
        tokenInterceptor()
    },
    init: {
        onLoad: 'login-required',
        checkLoginIframe: false,

    },

    config: {
        realm: 'test',
        url: 'http://localhost:7080',
        clientId: 'myinpulse'
    }
}  );
*/

export { store };