// The Lucia project.
// Copyright 2023-2026 DSP, inc.  All rights reserved.
// Authors:
//   chiayin.kuo@dsp.im (chiayin), 2023/1/31
//   imacat.yang@dsp.im (imacat), 2023/9/23
//   cindy.chang@dsp.im (Cindy Chang), 2024/5/30
/**
 * @module main Application entry point. Creates the Vue app instance,
 *   registers plugins (Pinia, Router, PrimeVue, SweetAlert2, Toast),
 *   global components, and Cytoscape.js extensions.
 */

import { createApp, markRaw } from "vue";

import App from "./App.vue";
import router from "./router";
import pinia from "@/stores/main";
import ToastPlugin from "vue-toast-notification";
import cytoscape from "cytoscape";
import dagre from "cytoscape-dagre";
import popper from "cytoscape-popper";
import draggable from "vuedraggable";
import VueSweetalert2 from "vue-sweetalert2";

// import CSS
import "./assets/main.css";
import "vue-toast-notification/dist/theme-sugar.css";
import "sweetalert2/dist/sweetalert2.min.css";

// import PrimeVue
import PrimeVue from "primevue/config";
import Aura from "@primevue/themes/aura";
import "primeicons/primeicons.css"; //icons
import Drawer from "primevue/drawer";
import Select from "primevue/select";
import Tag from "primevue/tag";
import ProgressBar from "primevue/progressbar";
import Tabs from "primevue/tabs";
import TabPanel from "primevue/tabpanel";
import DataTable from "primevue/datatable";
import Column from "primevue/column";
import ColumnGroup from "primevue/columngroup"; // optional
import Row from "primevue/row"; // optional
import RadioButton from "primevue/radiobutton";
import Timeline from "primevue/timeline";
import ToggleSwitch from "primevue/toggleswitch";
import InputNumber from "primevue/inputnumber";
import InputText from "primevue/inputtext";
import Chart from "primevue/chart";
import Slider from "primevue/slider";
import DatePicker from "primevue/datepicker";
import Tooltip from "primevue/tooltip";
import Checkbox from "primevue/checkbox";
import Dialog from "primevue/dialog";
import ContextMenu from "primevue/contextmenu";

const app = createApp(App);

// Pinia Set
pinia.use(({ store }) => {
  store.$router = markRaw(router);
});

// Cytoscape.js's style
cytoscape.use(dagre);
cytoscape.use(popper((ref) => ref));

app.use(pinia);
app.use(router);
app.use(VueSweetalert2);
app.use(ToastPlugin, {
  // use `this.$toast` in Vue.js
  position: "bottom",
  duration: 5000,
});
app.use(PrimeVue, { theme: { preset: Aura } });
app.component("Drawer", Drawer);
app.component("Select", Select);
app.component("Tag", Tag);
app.component("ProgressBar", ProgressBar);
app.component("Tabs", Tabs);
app.component("TabPanel", TabPanel);
app.component("DataTable", DataTable);
app.component("Column", Column);
app.component("ColumnGroup", ColumnGroup);
app.component("Row", Row);
app.component("RadioButton", RadioButton);
app.component("Timeline", Timeline);
app.component("ToggleSwitch", ToggleSwitch);
app.component("InputNumber", InputNumber);
app.component("InputText", InputText);
app.component("Chart", Chart);
app.component("Slider", Slider);
app.component("DatePicker", DatePicker);
app.component("Checkbox", Checkbox);
app.component("Dialog", Dialog);
app.component("ContextMenu", ContextMenu);
app.component("Draggable", draggable); // Drag and drop
app.directive("tooltip", Tooltip);

app.mount("#app");