import { createApp, h } from 'vue';
import {createInertiaApp, usePage} from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy';
import axios from 'axios';
import { initializeApp } from 'firebase/app';
import { getAnalytics } from 'firebase/analytics';
import AOS from 'aos';
import {createPinia} from "pinia";
import '@prompt/assets/app.scss'

import "aos/dist/aos.css"
import "swiper/css"
import 'jarallax/dist/jarallax.esm.js'
import 'jarallax/dist/jarallax.min.js'
import "swiper/css/pagination"
import 'shufflejs'
import "swiper/css/navigation"
import "swiper/css/autoplay"
import "preline"

// bootstrap
window.axios = axios;
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

// Firebase configuration
const firebaseConfig = {
    apiKey: import.meta.env.VITE_FIREBASE_API_KEY ?? null,
    authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN ?? null,
    projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID ?? null,
    storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET ?? null,
    messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID ?? null,
    appId: import.meta.env.VITE_FIREBASE_APP_ID ?? null,
    measurementId: import.meta.env.VITE_FIREBASE_MEASUREMENT_ID ?? null
};

// Initialize Firebase
console.log(firebaseConfig.apiKey);
if(firebaseConfig.apiKey !== null && firebaseConfig.apiKey !== '') {
    const firebaseApp = initializeApp(firebaseConfig);
    const analytics = getAnalytics(firebaseApp);
}

createInertiaApp({
    title: () => usePage().props.pageName ? `${usePage().props.pageName} - ${usePage().props.siteName}` : usePage().props.siteName,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./**/**/**/*.vue')),
    setup({el, App, props, plugin}) {
        const app = createApp({render: () => h(App, props)})
        app.use(plugin)
            .use(createPinia())
            .use(ZiggyVue)

        app.mixin({
            mounted() {
                AOS.init({})
            },
            beforeUnmount() {
                const backdrop = document.querySelector('[data-hs-overlay-backdrop-template]');
                if (backdrop) {
                    document.body.style.overflow = '';
                    backdrop.remove();
                }
            }
        });

        return app.mount(el);
    },
    progress: {
        color: '#4B5563',
    },
}).then(r => { console.log(r); });