import {createApp} from 'vue'
import {createPinia} from "pinia";
import './style.scss'
import router from './router'


import App from './App.vue'


// Vuetify
import 'vuetify/styles'
import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader

import {createVuetify} from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

// Auth
import {createAuth} from "vue-auth3";
import driverAuthBearerToken from "vue-auth3/dist/drivers/auth/bearer-token.js"
import {useAxios} from "./composables/useAxios";

const {client} = useAxios();

const vuetify = createVuetify({
    components,
    directives,
    icons: {
        defaultSet: 'mdi', // This is already the default value - only for display purposes
    },
})

const pinia = createPinia()
const app = createApp(App)
app.use(router)
app.use(vuetify)
app.use(pinia)

registerLayouts(app);



/**
 * @description Register all layouts
 * @param app
 */
function registerLayouts(app) {
    const layouts = import.meta.glob('./layouts/*.vue', {eager: true});

    Object.entries(layouts).forEach(([file, layout]) => {
        // get file name from file
        const fileName = file.split('/').pop().replace('.vue', '');

        // register layout
        app.component(fileName, layout?.default);
    });
}

const auth = createAuth({
    rolesKey: "type",
    notFoundRedirect: "/",
    fetchData: {
        url: "/auth/user",
        enabled: true,
        cache: true,
    },
    loginData: {
        url: "/auth/login",
    },
    logoutData: {
        redirect: "/login",
        url: "/auth/logout",
    },
    refreshToken: {
        enabled: false,
    },

    plugins: {
        router,
    },
    drivers: {
        http: {
            request: client,
        },
        auth: driverAuthBearerToken,
    },
})

const token = auth.token();
if (token) {
    client.defaults.headers.common['Authorization'] = `Bearer ${token}`
}


client.interceptors.response.use(
    response => response,
    error => {
        if (error.response.status === 401) {
            auth.logout()
        }
        return Promise.reject(error)
    }
)

app.use(auth)

app.mount('#app')