import "../css/app.css";
import "./bootstrap";

import { createInertiaApp } from "@inertiajs/vue3";
import { createApp, DefineComponent, h } from "vue";
import { ZiggyVue } from "../../vendor/tightenco/ziggy";
import JobLayout from "./Layouts/JobLayout.vue";

export const appName = import.meta.env.VITE_APP_NAME || "Laravel";

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name : string) => {
        // resolvePageComponent(
        //     `./Pages/${name}.vue`,
        //     import.meta.glob<DefineComponent>('./Pages/**/*.vue'),
        // )
        const pages: Record<string, DefineComponent> = import.meta.glob("./Pages/**/*.vue", { eager: true });
        let page: DefineComponent = pages[`./Pages/${name}.vue`];
        page.default.layout = page.default.layout || JobLayout;
        return page;
    },
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue)
            .mount(el);
    },
    progress: {
        color: "hsl(120 100% 41%)",
    },
});
