import { htmlToElement } from "./embedUtils.js";
import type { TIPLINK_BUILD_ENV_TYPE } from "./interfaces.js";
import { getCloseButtonUrl } from "./utils.js";

export function showDialog(buildEnv: TIPLINK_BUILD_ENV_TYPE, html: string) {
  const styleDiv = htmlToElement<HTMLDivElement>(
    "<style>" +
      "#tipLinkAlert__close-btn {" +
      "  position: absolute;" +
      "  top: 0px;" +
      "  right: 0px;" +
      "  width: 44px;" +
      "  height: 44px;" +
      "  padding: 12px;" +
      "  display: flex;" +
      "  justify-content: center;" +
      "  align-items: center;" +
      "  user-select: none;" +
      "}" +
      "" +
      "#tipLinkAlert__close-btn-image {" +
      "  width: 60%;" +
      "  height: 60%;" +
      "  cursor: pointer;" +
      "}" +
      "" +
      "#tipLinkAlert__close-btn-image:hover {" +
      "  opacity: 50%;" +
      "}" +
      "" +
      ".not-allowed {" +
      "  min-width: 285px;" +
      "  position: fixed;" +
      "  top: 50%;" +
      "  left: 50%;" +
      "  transform: translate(-50%, -50%);" +
      "  z-index: 2147483647;" +
      "  background-color: #17303e;" +
      "  color: #ffffff;" +
      "  padding: 24px;" +
      "  border-radius: 8px;" +
      "  border-color: #e0e7eb;" +
      "  border-width: 2px;" +
      "  border: solid;" +
      "}" +
      "</style>"
  );
  window.document.head.appendChild(styleDiv);
  const closeButton = htmlToElement(
    `<div id="tipLinkAlert__close-btn"><img id="tipLinkAlert__close-btn-image" src="${getCloseButtonUrl(
      buildEnv
    )}"/></div>`
  );
  closeButton.addEventListener("click", () => {
    if (window.document.body.contains(notAllowedDiv)) {
      notAllowedDiv.remove();
    }
    if (window.document.head.contains(styleDiv)) {
      styleDiv.remove();
    }
  });
  const notAllowedDiv = htmlToElement<HTMLDivElement>(
    `<div class="not-allowed">${html}</div>`
  );
  notAllowedDiv.appendChild(closeButton);
  window.document.body.appendChild(notAllowedDiv);
}