import { createApp } from 'vue';
import { createPinia } from 'pinia';
import piniaPersist from 'pinia-plugin-persist';
import App from './App.vue';
import DataTable from '~/components/DataTable';
import DialogForm from '~/components/DialogForm';
import Icon from '~/components/Icon.vue';
import * as ElIcons from '@element-plus/icons-vue';
import DictTag from '~/components/DictTag.vue'
import Pagination from '~/components/Pagination.vue'

// import ElementPlus from "element-plus";
// import "element-plus/theme-chalk/src/common/var.scss";

import router from './router';
import RichText from '~/components/RichText.vue';
import Map from '~/components/Map.vue';
import ImageUpload from '~/components/ImageUpload.vue';
import FileUpload from '~/components/FileUpload.vue';
import { guardian, topProgressBar } from './guardian';

async function bootstrap(): Promise<void> {
  const app = createApp(App);

  const pinia = createPinia();
  pinia.use(piniaPersist);

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

  app.component('Pagination', Pagination);
  app.component('DictTag', DictTag);
  app.component('DataTable', DataTable);
  app.component('DialogForm', DialogForm);
  app.component('Icon', Icon);
  app.component('RichText', RichText);
  app.component('Map', Map);
  app.component('UploadImage', ImageUpload);
  app.component('UploadFile', FileUpload);

  Object.keys(ElIcons).forEach((icon: string) => {
    app.component(`ElIcon${icon}`, ElIcons[icon]);
  });

  topProgressBar();

  guardian();

  await router.isReady();

  app.mount('#app');
}

bootstrap();