import '@/assets/styles.scss';
import { registerVersion, quit } from '@3cr/sdk-browser';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import Notifications from '@kyvg/vue3-notification';
import { App as VueApp, createApp } from 'vue';
import App from '@/App.vue';
import { demoPayload } from '@/components/demo/demo-payload';
import { injectedStyleId } from '@/config';
import { i18n } from '@/plugins/vue-i18n';
import { pinia } from '@/plugins/pinia';
import { version } from '@/plugins/version';
import { vuetify } from '@/plugins/vuetify';
import { ViewerOptions, ViewerPayload } from '@3cr/viewer-types-ts';

let app: VueApp<Element> | null = null;

let mounted: InstanceType<typeof App> | null = null;

export async function mountViewer(host: Element | string, sdkVersion: string): Promise<void> {
  if (!app) {
    await registerVersion(sdkVersion);
    app = createApp(App);
    app.component('font-awesome-icon', FontAwesomeIcon);
    app.use(i18n);
    app.use(pinia);
    app.use(version);
    app.use(vuetify);
    app.use(Notifications);
    mounted = app.mount(host) as InstanceType<typeof App>;
  } else {
    throw new Error('Please call `unmountViewer` before registering again');
  }
}

export async function loadViewer(payload: ViewerPayload = demoPayload, options: ViewerOptions = {}): Promise<void> {
  if (mounted) {
    await mounted.loadViewer(payload, options);
  } else {
    throw new Error('Please call `mountViewer` first');
  }
}

export async function loadSession(url: string): Promise<void> {
  if (mounted) {
    await mounted.loadSession(url);
  } else {
    throw new Error('Please call `mountViewer` first');
  }
}

export async function unmountViewer(): Promise<void> {
  if (app) {
    document.getElementById(injectedStyleId)?.remove();
    app.unmount();
    mounted = null;
    app = null;
    try {
      await quit();
    } catch (e) {}
  } else {
    throw new Error('Please call `mountViewer` first');
  }
}