import { render } from "solid-js/web";

import { MintedUpcPicker, TOGGLE_MODAL_EVENT_TYPE } from "./MintedUpcPicker";
import { MintedUpcPickerKwargs } from "./types";

let isMounted = false;

export function mintedUpcPickerReMountRequest(): void {
  window.dispatchEvent(new CustomEvent(TOGGLE_MODAL_EVENT_TYPE));
}

export function mountMintedUpcPicker(kwargs?: Record<string, unknown>): Promise<void> {
  if (isMounted) {
    mintedUpcPickerReMountRequest();
    return Promise.resolve();
  }

  const { pog_name: pogName } = kwargs as unknown as MintedUpcPickerKwargs;

  const rootElement = document.body.appendChild(document.createElement("div"));
  rootElement.id = "mm-minted-upc-picker-root";
  render(() => <MintedUpcPicker pogName={pogName} />, rootElement);

  isMounted = true;
  mintedUpcPickerReMountRequest();

  return Promise.resolve();
}