import "./assets/index.css";
import "./assets/main.css";
// import "./assets/table.css";
import "./assets/btn.css";
import "./assets/pagination.css";

import { createApp } from "vue";
import { createI18n } from "vue-i18n";
import tw from "./config/tw.json";
import cn from "./config/cn.json";
import us from "./config/us.json";
import Antd from "ant-design-vue";
import { createPinia } from "pinia";
import App from "./App.vue";
import router from "./router";
import "virtual:svg-icons-register";
// 引入项目中的全部全局组件
import SvgIcon from "@/components/svgIcon.vue";
import library from "./fontawsomeIconRegister";
import "flag-icons/css/flag-icons.min.css";

/* import font awesome icon component */
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

import { focusPlugin } from "@/directives/focusPlugin";
import { draggable } from "@/directives/draggable";
const messages = {
  tw,
  cn,
  us,
};

const storedLanguage = localStorage.getItem("CviLanguage") || "us";

const i18n = createI18n({
  legacy: false,
  locale: storedLanguage, 
  fallbackLocale: 'us', 
  messages, 
});
const app = createApp(App);
app.use(createPinia());
app.use(router);
app.use(Antd);
app.use(i18n);

// 组装成一个对象
const allGlobalComponents = { SvgIcon, FontAwesomeIcon };
const globalComponent = {
  install(app) {
    // 循环注册所有的全局组件
    Object.keys(allGlobalComponents).forEach((componentName) => {
      app.component(componentName, allGlobalComponents[componentName]);
    });
  },
};
app.use(globalComponent);
app.use(focusPlugin);
app.use(draggable);
app.mount("#app");