import { Root, createRoot } from "react-dom/client";
import { ComponentPropsWithoutRef } from "react";
import QuizPopup from "./QuizPopup";


type Props = ComponentPropsWithoutRef<typeof QuizPopup>;

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

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

        this.root = createRoot(this.element);

        this.render(props);
    }

    render(props: Props) {
        this.root?.render(<QuizPopup {...props} />);
    }

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