import { ContentScriptContext } from "#imports";
import App from "./App.vue";
import { featureEnableBlock } from "@/utils/storage";
import { createApp } from "vue";
import { createProxyService } from '@webext-core/proxy-service';
import { BlockedSite } from "@/utils/types";
const blockedSitesRepo = createProxyService(BLOCKED_SITES_REPO_KEY);

export default defineContentScript({
  matches: ["*://*/*"],
  cssInjectionMode: "ui",

  async main(ctx) {
    const ui = await defineOverlay(ctx);
    const isBlockEnabled = await featureEnableBlock.getValue();
    const currentDomain = window.location.hostname;
    const blockedSites = await blockedSitesRepo.getAll()

    function isOnBlockList() {
      return (
        blockedSites.filter(function (blockedSite: BlockedSite) {
          return (blockedSite.url == currentDomain || "www." + blockedSite.url == currentDomain) && blockedSite.blocked;
        }).length > 0
      );
    }

    function injectToWebsite() {
      if (!isBlockEnabled || !isOnBlockList()) return;
      console.log("[ba-ka] site blocked! please go back to your work lol");
      ui.mount();
    }

    injectToWebsite();

    ctx.addEventListener(window, "wxt:locationchange", (event) => {
      injectToWebsite();
    });
  },
});

function defineOverlay(ctx: ContentScriptContext) {
  return createShadowRootUi(ctx, {
    name: "let-me-focus-block",
    position: "overlay",
    zIndex: 9999,
    onMount(container, _shadow, shadowHost) {
      const app = createApp(App);
      app.mount(container);
      shadowHost.style.pointerEvents = "none";
      return app;
    },
    onRemove(app) {
      app?.unmount();
    },
  });
}