import './bootstrap';
import { createApp, h, ref, watch } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import PrimeVue from 'primevue/config';
import Aura from '@primevue/themes/aura';
import 'primeicons/primeicons.css';
import { route as routeHelper } from 'ziggy-js';

createInertiaApp({
    resolve: name => {
        const pages = import.meta.glob('./Pages/**/*.vue', { eager: true });
        return pages[`./Pages/${name}.vue`];
    },
    setup({ el, App, props, plugin }) {
        const isDark = ref(localStorage.getItem('theme') === 'dark');
        
        watch(isDark, (newVal) => {
            if (newVal) {
                document.documentElement.classList.add('p-dark');
                localStorage.setItem('theme', 'dark');
            } else {
                document.documentElement.classList.remove('p-dark');
                localStorage.setItem('theme', 'light');
            }
        }, { immediate: true });
        
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(PrimeVue, {
                theme: {
                    preset: Aura,
                    options: {
                        darkModeSelector: '.p-dark',
                    },
                },
            })
            .provide('theme', { isDark, toggle: () => isDark.value = !isDark.value })
            .mixin({ methods: { route: routeHelper } })
            .mount(el);
    },
});