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 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";
// 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(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;

app.mount("#app");