import { createApp } from "vue";
import router from "./routers";
import { createPinia } from "pinia";
import Clipboard from "v-clipboard";
import { Money3Directive } from "v-money3";

import VueDatePicker from "@vuepic/vue-datepicker";
import "@vuepic/vue-datepicker/dist/main.css";
import VueSelect from "vue-select";
import "vue-select/dist/vue-select.css";

import {
  LadaDialog,
  LadaAccordion,
  Pager,
  Loader,
  LadaDrawer,
  Blockui,
  Empty,
  OrderStatus,
  LoadingOverlay,
  LadaDateRangePicker,
} from "@/components/index";

import "bootstrap/dist/css/bootstrap.css";
import "bootstrap";
import "boxicons/css/boxicons.min.css";

import { useToast } from "vue-toast-notification";
import "vue-toast-notification/dist/theme-sugar.css";

import Toast from "vue-toastification";
// Import the CSS or use your own!
import "vue-toastification/dist/index.css";
const toastOption = {
  position: "top-center",
  timeout: 3000,
};

import VueNumberFormat from "vue-number-format";

import Editor from "@tinymce/tinymce-vue";

import "viewerjs/dist/viewer.css";
import VueViewer from "v-viewer";

import "./assets/icons/feather/feather.css";
import "./assets/icons/fontawesome/css/all.min.css";
import "./style.css";
import "@/assets/css/lada.css";
import "@/assets/css/tooltip.css";
import "@/assets/css/mobile-menu.css";

import App from "./App.vue";
import {
  getAppVersion,
  setStoredVersion,
  getStoredVersion,
  checkVersionAndReload,
} from "@/infrastructure/utilities/cacheHelper";

// Kiểm tra version và force reload nếu cần
const currentVersion = getAppVersion();
const storedVersion = getStoredVersion();

if (storedVersion !== "0" && storedVersion !== currentVersion) {
  console.log("New version detected, clearing cache and reloading...");
  checkVersionAndReload(storedVersion, currentVersion);
} else {
  setStoredVersion(currentVersion);
}

const app = createApp(App);

app.use(router);
var pinia = createPinia();
app.use(pinia);
app.use(Toast, toastOption);
app.use(Clipboard);
app.use(VueNumberFormat);
app.use(VueViewer);

app.component("VueDatePicker", VueDatePicker);
app.component("v-select", VueSelect);
app.component("LadaDialog", LadaDialog);
app.component("LadaDateRangePicker", LadaDateRangePicker);
app.component("LadaAccordion", LadaAccordion);
app.component("Loader", Loader);
app.component("pager", Pager);
app.component("editor", Editor);
app.component("blockui", Blockui);
app.component("empty", Empty);
app.component("OrderStatus", OrderStatus);
app.component("LoadingOverlay", LoadingOverlay);

app.directive("money3", Money3Directive);

const vFocus = {
  mounted: (el) => el.focus(),
};

app.directive("focus", vFocus);

app.component("LadaDrawer", LadaDrawer);
app.mount("#app");
