import { createPinia } from "pinia";
import { App as VueApp, ComponentPublicInstance, createApp } from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";
import axios from "axios";
import VueAxios from "vue-axios";
import Notifications from "notiwind";
import "./assets/styles/tailwind.css";
import { FontAwesomeIcon } from "./lib/fontawesome";
import Camera from "simple-vue-camera";

// Can trigger this with a 'throw' inside some top-level function, eg. on the HomeView
function setupGlobalErrorHandler(app: VueApp) {
  // @ts-expect-error 'cause we cannot see why config is not defined
  app.config.errorHandler = (
    err: Error,
    instance: ComponentPublicInstance | null,
    info: string,
  ) => {
    console.error(
      "Ouch! Global Error Handler.",
      "Error:",
      err,
      "- Error toString:",
      err.toString(),
      "- Info:",
      info,
      "- Instance:",
      instance,
    );
    // Want to show a nice notiwind notification but can't figure out how.
    alert(
      (err.message || "Something bad happened") +
        " - Try reloading or restarting the app.",
    );
  };
}

const app = createApp(App)
  .component("fa", FontAwesomeIcon)
  .component("camera", Camera)
  .use(createPinia())
  .use(VueAxios, axios)
  .use(router)
  .use(Notifications);

setupGlobalErrorHandler(app);

app.mount("#app");