import { createApp } from "vue";
import App from "./App.vue";
import { createI18n } from "vue-i18n";
import pinia from "@/plugins/store.js";
import heroicons from "../../plugins/heroicons";
import VueNumberFormat from "vue-number-format";
import MoneyFormat from "@/components/MoneyFormat.vue";
import TimeFormat from "@/components/TimeFormat.vue";

import "@/assets/admin-app.css";

const i18n = createI18n({
  locale: "en",
  messages: window.gcargo.strings,
  legacy: false,
});

function init(orderId) {
  let app = createApp(App, {
    orderId: orderId,
  })
    .use(pinia)
    .use(i18n)
    .use(VueNumberFormat, { prefix: "", decimal: ".", thousand: "," })
    .component("MoneyFormat", MoneyFormat)
    .component("TimeFormat", TimeFormat);
  app = heroicons(app);
  app.mount(`#gcargo-order-table-${orderId}`);
}

const orderIds = document.querySelectorAll("[id^='gcargo-order-table-']");
orderIds.forEach((element) => {
  init(element.id.replace("gcargo-order-table-", ""));
});
