import Vue from 'vue';
import VTooltip from 'v-tooltip';
import VueLazyload from 'vue-lazyload';
import { isDevMode } from '@/config/env';
import pluginLoader from '@/vue/plugins/loader';
import devLoader from '@/plugins/dev';
import store from '@/vue/store/index';
import { usePinia } from '@/vue/pinia/setup';
import mixin from '@/vue/mixin/index';
import router from '@/vue/router';
import i18nLoader from '@/vue/i18n/vue';
import middileware from '@/vue/router/middleware';
import VueRouter from 'vue-router';
import VueCompositionAPI from '@vue/composition-api';
import loadimage from '../../assets/image/loading.gif';
import errorimage from '../../assets/image/error.gif';
import App from '../../popup/App.vue';

if (isDevMode) {
  devLoader();
}

Vue.use(VueCompositionAPI);
Vue.use(VTooltip);
Vue.use(mixin);
Vue.use(pluginLoader);
Vue.use(store);
Vue.use(VueRouter);
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: errorimage,
  loading: loadimage,
  attempt: 1,
});

middileware(router);

if (isDevMode) {
  const browser = await import('webextension-polyfill');
  globalThis.browser = browser.default || browser;
  Vue.prototype.$browser = globalThis.browser;
}

const i18n = i18nLoader();

new Vue({
  el: '#app',
  i18n,
  store,
  pinia: usePinia,
  router,
  render: (h) => h(App),
});
