import { createPinia } from 'pinia';
import PrimeVue from 'primevue/config';
import ConfirmationService from 'primevue/confirmationservice';
import ToastService from 'primevue/toastservice';
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

import BlockViewer from '@/components/BlockViewer.vue';
import { definePreset } from '@primevue/themes';

import '@/assets/styles.scss';
import '@/assets/tailwind.css';
import Nora from '@primevue/themes/nora';
import axios from 'axios';
import { LoadingStore } from './stores/LoadingStore.js';

axios.defaults.baseURL = import.meta.env.VITE_BACKEND_URL;
//axios.defaults.baseURL = 'http://localhost:8082' 
console.log(axios.defaults.baseURL);



import { createAuth } from '@websanova/vue-auth';
import driverAuthBearer from '@websanova/vue-auth/dist/drivers/auth/bearer.esm.js';
import driverHttpAxios from '@websanova/vue-auth/dist/drivers/http/axios.1.x.esm.js';
import driverRouterVueRouter from '@websanova/vue-auth/dist/drivers/router/vue-router.2.x.esm.js';


var auth = createAuth({
    plugins: {
        http: axios,
        router: router
    },
    drivers: {
        http: driverHttpAxios,
        auth: driverAuthBearer,
        router: driverRouterVueRouter
    },
    options:{
        notFoundRedirect: '/auth/login',
        authRedirect: '/auth/login',
        loginData: {url: '/api/auth/login', method: 'POST', redirect: '/'},
        logoutData: {url:'/api/auth/logout', redirect: '/auth/login'},
        fetchData: {url: '/api/auth/fetch-user', method: 'GET', enabled: false},
        refreshData: {url: '/api/auth/refresh-token', method: 'GET', enabled: false}
    }
});

const app = createApp(App);
const pinia = createPinia();

app.use(router);
app.use(auth);
app.use(pinia);

const preset = definePreset(Nora, {
    semantic: {
        primary: {
            50: '{violet.50}',
            100: '{violet.100}',
            200: '{violet.200}',
            300: '{violet.300}',
            400: '{violet.400}',
            500: '{violet.500}',
            600: '{violet.600}',
            700: '{violet.700}',
            800: '{violet.800}',
            900: '{violet.900}',
            950: '{violet.950}'
        },
        colorScheme: {
            light: {
                surface: {
                    0: '#f3f3f3',
                    50: '{viva.50}',
                    100: '{viva.100}',
                    200: '{viva.200}',
                    300: '{viva.300}',
                    400: '{viva.400}',
                    500: '{viva.500}',
                    600: '{viva.600}',
                    700: '{viva.700}',
                    800: '{viva.800}',
                    900: '{viva.900}',
                    950: '{viva.950}'
                },
                formField: {
                    hoverBorderColor: '{primary.color}',
                    borderColor: '{primary.color}'
                }
            },
            dark: {
                surface: {
                    0: '#ffffff',
                    50: '{slate.50}',
                    100: '{slate.100}',
                    200: '{slate.200}',
                    300: '{slate.300}',
                    400: '{slate.400}',
                    500: '{slate.500}',
                    600: '{slate.600}',
                    700: '{slate.700}',
                    800: '{slate.800}',
                    900: '{slate.900}',
                    950: '{slate.950}'
                },
                formField: {
                    hoverBorderColor: '{primary.color}',
                    borderColor: '{primary.color}'
                }
            }
        },
        focusRing: {
            width: '2px',
            color: '{primary.color}',
            offset: '1px'
        }
    }
});

app.use(PrimeVue, {
    theme: {
        preset: preset,
        options: {
            prefix: 'p',
            darkModeSelector: '.app-dark'
        }
    }
});
app.use(ToastService);
app.use(ConfirmationService);

app.component('BlockViewer', BlockViewer);

app.mount('#app');

const loadingStore = LoadingStore()


axios.interceptors.request.use(function (config) {
    loadingStore.another_loading = true;
    return config
}, function (error) {
    return Promise.reject(error);
  });
  
axios.interceptors.response.use(function (response) {
    loadingStore.another_loading = false;

    return response;
  }, function (error) {
    return Promise.reject(error);
  });