import "./assets/styles.scss";
import { createApp } from "vue";
import App from "./App.vue";
import { createCoreRouter } from "./router/index.js";

import { definePreset } from "@primeuix/themes";
import Aura from "@primeuix/themes/aura";
import PrimeVue from "primevue/config";
import ConfirmationService from "primevue/confirmationservice";
import ToastService from "primevue/toastservice";
import Ripple from "primevue/ripple";
import StyleClass from "primevue/styleclass";

/**
 * Bootstrap Vue, Vue Router, and PrimeVue for Maestro CORE.
 *
 * @param {(router: import('vue-router').Router) => void} [resolveCustomerPage]
 *        Optional callback to extend the router after CORE routes are registered.
 */
export function bootCore(resolveCustomerPage) {
  const router = createCoreRouter(resolveCustomerPage);

  const app = createApp(App);

  app.use(router);

  const MyPreset = definePreset(Aura, {
    semantic: {
      primary: {
        50: "{sky.50}",
        100: "{sky.100}",
        200: "{sky.200}",
        300: "{sky.300}",
        400: "{sky.400}",
        500: "{sky.500}",
        600: "{sky.600}",
        700: "{sky.700}",
        800: "{sky.800}",
        900: "{sky.900}",
        950: "{sky.950}",
      },
    },
  });

  app.use(PrimeVue, {
    theme: {
      preset: MyPreset,
      options: {
        darkModeSelector: ".app-dark",
      },
    },
  });
  app.use(ToastService);
  app.use(ConfirmationService);
  app.directive("ripple", Ripple);
  app.directive("styleclass", StyleClass);

  app.mount("#app");
}
