import {div} from "../../utils/htmlUtils";
import {PopupHtmlContainer} from "./PopupHtmlContainer";
import {createDeferredPromise} from "../../utils/createDeferredPromise";


//TODO Move it to SGK and Refactor
export function CasinoFreespinsPopup({ msg1, value, msg2, timeout = 0 }) {
  const dom = div("cfs-popup");
  dom.innerHTML = "<div class=\"cfs-popup__overlay\"></div>";
  const popup = new PopupHtmlContainer(dom, "cfs-popup__body");
  popup.element.innerHTML = `<h1>${msg1}</h1><span>${value}</span><h1>${msg2}</h1>`;
  const deferred = createDeferredPromise();

  deferred.promise.then(() => {
    dom.style.opacity = "0";
    setTimeout(() => {
      popup.destroy();
      dom.remove();
    }, 300);
  });
  document.body.append(dom);
  if (timeout)
    setTimeout(deferred.resolve, timeout);
  dom.style.opacity = "0";
  setTimeout(() => dom.style.opacity = "1", 50);

  const preventClickCb = (e) => e.preventDefault();
  dom.addEventListener("pointerdown", preventClickCb);
  /**
   * @type {Spine}
   */
  // const spine = Locator.viewport.getChildByName('MainScene');
  // const slot = spine.slotContainers[spine.skeleton.findSlotIndex('slot_placeholder')];
  // popup.scale.set(3);
  // slot.addChild(popup);

  setTimeout(() => {
    dom.removeEventListener("pointerdown", preventClickCb);
    dom.addEventListener("pointerdown", (e) => {
      e.preventDefault();
      deferred.resolve();
    });

    // Locator.viewport.getChildByName('MainScene').addChild(popup);
  }, 300);
  return deferred.promise;
}
