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 { library } from "@fortawesome/fontawesome-svg-core";
import {
  faArrowDown,
  faArrowLeft,
  faArrowRight,
  faArrowRotateBackward,
  faArrowUpRightFromSquare,
  faArrowUp,
  faBan,
  faBitcoinSign,
  faBurst,
  faCalendar,
  faCamera,
  faCheck,
  faChevronDown,
  faChevronLeft,
  faChevronRight,
  faChevronUp,
  faCircle,
  faCircleCheck,
  faCircleInfo,
  faCircleQuestion,
  faCircleUser,
  faClock,
  faCoins,
  faComment,
  faCopy,
  faDollar,
  faEllipsis,
  faEllipsisVertical,
  faEye,
  faEyeSlash,
  faFileLines,
  faFloppyDisk,
  faFolderOpen,
  faForward,
  faGift,
  faGlobe,
  faHammer,
  faHand,
  faHandHoldingDollar,
  faHandHoldingHeart,
  faHouseChimney,
  faImagePortrait,
  faLeftRight,
  faLocationDot,
  faLongArrowAltLeft,
  faLongArrowAltRight,
  faMagnifyingGlass,
  faMessage,
  faMinus,
  faPen,
  faPersonCircleCheck,
  faPersonCircleQuestion,
  faPlus,
  faQuestion,
  faQrcode,
  faRotate,
  faShareNodes,
  faSpinner,
  faSquare,
  faSquareCaretDown,
  faSquareCaretUp,
  faSquarePlus,
  faTrashCan,
  faTriangleExclamation,
  faUser,
  faUsers,
  faXmark,
} from "@fortawesome/free-solid-svg-icons";

library.add(
  faArrowDown,
  faArrowLeft,
  faArrowRight,
  faArrowRotateBackward,
  faArrowUpRightFromSquare,
  faArrowUp,
  faBan,
  faBitcoinSign,
  faBurst,
  faCalendar,
  faCamera,
  faCheck,
  faChevronDown,
  faChevronLeft,
  faChevronRight,
  faChevronUp,
  faCircle,
  faCircleCheck,
  faCircleInfo,
  faCircleQuestion,
  faCircleUser,
  faClock,
  faCoins,
  faComment,
  faCopy,
  faDollar,
  faEllipsis,
  faEllipsisVertical,
  faEye,
  faEyeSlash,
  faFileLines,
  faFloppyDisk,
  faFolderOpen,
  faForward,
  faGift,
  faGlobe,
  faHammer,
  faHand,
  faHandHoldingDollar,
  faHandHoldingHeart,
  faHouseChimney,
  faImagePortrait,
  faLeftRight,
  faLocationDot,
  faLongArrowAltLeft,
  faLongArrowAltRight,
  faMagnifyingGlass,
  faMessage,
  faMinus,
  faPen,
  faPersonCircleCheck,
  faPersonCircleQuestion,
  faPlus,
  faQrcode,
  faQuestion,
  faRotate,
  faShareNodes,
  faSpinner,
  faSquare,
  faSquareCaretDown,
  faSquareCaretUp,
  faSquarePlus,
  faTrashCan,
  faTriangleExclamation,
  faUser,
  faUsers,
  faXmark,
);

import { FontAwesomeIcon } from "@fortawesome/vue-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. Info:",
      info,
      "Error:",
      err,
      "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");