import { createApp, defineAsyncComponent } from "vue";
import App from "./App.vue";
import router from "./router";
import { Dialog, Notify, Quasar, Loading } from "quasar";
import "./quasar-user-options";
import keycloak, { getToken } from "@/plugins/keycloak";

import qDraggableTable from "quasar-ui-q-draggable-table";
import "quasar-ui-q-draggable-table/dist/index.css";

import "quasar/src/css/index.sass";
import th from "quasar/lang/th";

import "@vuepic/vue-datepicker/dist/main.css";
import http from "./plugins/http";
import { createPinia } from "pinia";

import CodeDiff from "v-code-diff";
import json from "highlight.js/lib/languages/json";

CodeDiff.hljs.registerLanguage("json", json);
// organization
// position
// positionEmployee
//calendar
// insignia

// import './assets/main.css'

// Import GlobalFilters
import filters from "./plugins/filters";

const app = createApp(App);
const pinia = createPinia();

// เพิ่ม Global Filters ลงใน App
app.config.globalProperties.$filters = filters;

app.use(CodeDiff);
app.use(router);
app.use(pinia);
app.use(qDraggableTable);

app.use(
  Quasar,
  {
    plugins: {
      Notify,
      Dialog,
      Loading,
    }, // import Quasar plugins and add here
    config: {
      notify: {
        /* look at QuasarConfOptions from the API card */
      },
      loading: {
        /* look at QuasarConfOptions from the API card */
      },
    },
    lang: th,
  }
  //   quasarUserOptions // build ไม่ผ่านหลัง install code org&structure chart เลยต้องคอมเม้นไว้ก่อน เทสแล้วยังรันได้หลังคอมเม้น
);

//** Global Components */
app.component(
  "data-table",
  defineAsyncComponent(() => import("@/components/TableView.vue"))
);
app.component(
  "datepicker",
  defineAsyncComponent(() => import("@vuepic/vue-datepicker"))
);
app.component(
  "full-loader",
  defineAsyncComponent(() => import("@/components/FullLoader.vue"))
);

app.component(
  "selector",
  defineAsyncComponent(() => import("@/components/Selector.vue"))
);

app.component(
  "d-table",
  defineAsyncComponent(() => import("@/components/Table.vue"))
);

app.config.globalProperties.$http = http;

// authen with keycloak client
function getCookie(name: string) {
  const nameEQ = name + "=";
  const ca = document.cookie.split(";");
  for (let i = 0; i < ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == " ") c = c.substring(1, c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
  }
  return null;
}

const auth = await getToken();

if (auth.token && auth.refresh_token) {
  keycloak.init({
    checkLoginIframe: false,
    token: auth.token,
    refreshToken: auth.refresh_token,
  });
  // .then((authenticated) => {
  //   console.log("authenticated", authenticated);
  //   if (!authenticated) {
  //     window.location.reload();
  //   } else {
  //     console.log("Authenticated");
  //   }
  // })
  // .catch((err) => {
  //   console.error("Keycloak initialization failed:", err);
  // });
}

app.mount("#app");