import { createApp, defineAsyncComponent } from "vue";

import AppAuth from "@/AppAuth.vue";

const app = createApp({ AppAuth });
const vueComponents = import.meta.glob("@/vue/auth/**/*.vue", {
  eager: false,
});

import.meta.glob(["../images/**", "../fonts/**"]);

import { createPinia } from "pinia";
app.use(createPinia());

import axios from "./plugins/axios";
import VueAxios from "vue-axios";
app.use(VueAxios, axios);

import auth from "./plugins/auth";
app.use(auth);

import eventBus from "./plugins/event-bus";
app.use(eventBus);

import Vue3Toastify from "vue3-toastify";
import "../css/toastify.css";
app.use(Vue3Toastify);

import { Ziggy as ZiggyRoute } from "./ziggy";
import { ZiggyVue } from "ziggy-js/dist/vue";
app.use(ZiggyVue, ZiggyRoute);

window.Ziggy = ZiggyRoute;

Object.entries({ ...vueComponents }).forEach(([path, definition]) => {
  // Get name of component, based on filename
  // "./components/Fruits.vue" will become "Fruits"
  const componentName = path
    .split("/")
    .pop()
    .replace(/\.\w+$/, "")
    .replace(/([a-z])([A-Z])/g, "$1-$2")
    .toLowerCase();
  // console.log(componentName);
  // console.log(typeof definition);

  // Register component on this Vue instance
  app.component(componentName, defineAsyncComponent(definition));
});

app.mount("#app");