import sleep from 'sleep-promise';
import { createIntegratedUi } from 'wxt/utils/content-script-ui/integrated';
import { createVueApp } from '@/vue/content/service';
import GptContent from './GptContent.vue';

const containerParent = 'div.panel-content-wrapper > div > div > div.edit-row.description-wrap > div.edit-main > div';

export async function main(ctx) {
  const ui = await createIntegratedUi(ctx, {
    position: 'inline',
    anchor: containerParent,
    onMount(container) {
      const app = createVueApp(GptContent);
      app.$mount(container);
      return app;
    },
    onRemove(app) {
      app.$destroy();
    },
  });

  ctx.addEventListener(document, 'readystatechange', async () => {
    await sleep(2000);
    if (document.querySelector(containerParent)) {
      ui.mount();
    }
  });
}
