import { createApp, h } from 'vue'
import { App, Link, plugin as inertiaPlugin } from '@inertiajs/inertia-vue3'
import store from './store'
import { InertiaProgress as progress } from '@inertiajs/progress'
progress.init({
    color: '#673ab7',
})

import '../css/app.css'
import '../css/common.css'

const el = document.getElementById('app')

// let asyncViews = () => {
//     return import.meta.glob('./Pages/**/*.vue')
// }
const pages = import.meta.glob('./Pages/**/*.vue')
createApp({
    render: () =>
        h(App, {
            initialPage: JSON.parse(el.dataset.page),

            resolveComponent: name => {
                const importPage = pages[`./Pages/${name}.vue`]

                if (!importPage) {
                    throw new Error(`Unknown page ${name}. Is it located under Pages with a .vue extension?`)
                }

                return importPage().then(module => module.default)
            }

            // resolveComponent: async (name) => {
            //     var inertiaPageAsync = (await import(`./Pages/${name}.vue`)).default
            //     return inertiaPageAsync
            // },
            // resolveComponent: (name) => {
            //     var inertiaPageAsync = import.meta.globEager(`./Pages/${name}.vue`)
            //     return inertiaPageAsync[`./Pages/${name}.vue`].default
            // },
            // resolveComponent: async name => {
            //     if (import.meta.env.DEV) {
            //         return (await import(`./Pages/${name}.vue`)).default
            //     } else {
            //         let pages = asyncViews()
            //         const importPage = pages[`./Pages/${name}.vue`]
            //         return importPage().then(module => module.default)
            //     }
            // }

        }),
})
    .mixin({
        methods: {
            route: window.route
        }
    })
    .use(store)
    .use(inertiaPlugin)
    .component('InertiaLink', Link)
    .mount(el)