import { createApp } from 'vue';
import DefaultComponent from "./components/DefaultComponent.vue";
import router from "./router/index.js";
import i18n from "./i18n.js";
import { createPinia } from "pinia";
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import ENV from "./config/env.js";
import axios from 'axios';
import VueSimpleAlert from "vue3-simple-alert";
import Toast from "vue-toastification";
import "vue-toastification/dist/index.css";
import VueAwesomePaginate from "vue-awesome-paginate";
import "vue-awesome-paginate/dist/style.css"
import VueNextSelect from 'vue-next-select';
import 'vue-next-select/dist/index.css';
import 'sweetalert2/dist/sweetalert2.min.css';
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import "../../public/themes/default/fonts/typography/rubik/rubik.css";
import "../../public/themes/default/fonts/lab/lab.css";
import "../../public/themes/default/fonts/typography/public/public.css";
import "../../public/themes/default/fonts/fontawesome/fontawesome.css";
import VueApexCharts from "vue3-apexcharts";
import { useAuthStore } from "./stores//auth.js";
import appService from "./services/appService";


/* Start axios code*/
const API_URL = ENV.API_URL;
const API_KEY = ENV.API_KEY;

axios.defaults.baseURL = API_URL + '/api';
axios.interceptors.request.use(
    config => {
        config.headers['x-api-key'] = API_KEY;
        if (localStorage.getItem('auth')) {
            const auth = JSON.parse(localStorage.getItem('auth'));
            const token = auth.authToken;
            config.headers['Authorization'] = token ? `Bearer ${token}` : '';
        }

        if (localStorage.getItem('globalState')) {
            const language = JSON.parse(localStorage.getItem('globalState'));
            config.headers['x-localization'] = language?.lists?.language_code;
        }
        return config;
    }, error => Promise.reject(error),
);
/* End axios code */



const app = createApp(DefaultComponent)

/* Start permission code*/
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);
app.use(pinia);

const authStore = useAuthStore();

const permission = authStore.authPermission;
appService.recursiveRouter(router.options.routes, permission);
/* End permission code*/

// app.use(createPinia().use(piniaPluginPersistedstate));
app.component('vue-select', VueNextSelect)
app.use(router)
app.use(i18n)
app.use(VueAwesomePaginate)
app.use(VueSimpleAlert)
app.use(VueApexCharts)
app.use(Toast, {
    timeout: 2000,
    closeOnClick: true,
    pauseOnFocusLoss: true,
    pauseOnHover: true,
    draggable: true,
    draggablePercent: 0.6,
    showCloseButtonOnHover: false,
    hideProgressBar: false,
    closeButton: "button",
    icon: true,
    rtl: false
})
app.mount('#app');
