import { ButtonWidgetFixedParams, ButtonWidgetParams } from "@/model/widget/button";
import { createPortal } from "react-dom";
import { Root, createRoot } from "react-dom/client";
import { pollForSelector } from "../shared/pollForSelector";
import OpenQuizButton from "./OpenQuizButton";

export class ButtonWidget {
  root: Root | undefined;

  constructor(props: ButtonWidgetParams) {
    const { selector, selectorPollingTimeLimit = 60 } = props;

    const element = document.querySelector(selector);
    if (element) {
      this.root = createRoot(element);
      this.render(props);

      return;
    }

    if (!selectorPollingTimeLimit) {
      console.error(`Не удалось найти элемент ${selector} для вставки виджета`);
      return;
    }

    pollForSelector(selector, selectorPollingTimeLimit, (element) => {
      this.root = createRoot(element);
      this.render(props);
    });
  }

  render(props: Omit<ButtonWidgetParams, "selector" | "selectorPollingTimeLimit">) {
    this.root?.render(<OpenQuizButton {...props} />);
  }

  destroy() {
    if (this.root) this.root.unmount();
  }
}

export class ButtonWidgetFixed {
  root: Root | undefined;
  element = document.createElement("div");

  constructor(props: ButtonWidgetFixedParams) {
    this.element.style.setProperty("display", "none");
    document.body.appendChild(this.element);

    this.root = createRoot(this.element);

    this.render(props);
  }

  render(props: ButtonWidgetFixedParams) {
    this.root?.render(createPortal(<OpenQuizButton {...props} />, document.body));
  }

  destroy() {
    if (this.root) this.root.unmount();
    this.element.remove();
  }
}
