const iframeID = "retention_engine_frame_468384922";
const modalID = "retention_engine_modal_643872345";
const modalCloseID = "retention_engine_modal_close_0930345";
const modalContentID = "retention_engine_modal_content_18384235";

const openReModal = (iframeUrl) => {
  document.getElementById(iframeID).src = iframeUrl + "&is_embedded=true";
  document.getElementById(modalID).style.display = "flex";
  animateOpenModal();
};

const buildEmbeddedExperience = () => {
  const modal = document.createElement("div");
  modal.id = modalID;
  modal.style.cssText = `
    display: none;
    flex-direction: column;
    justify-content: center;
    position: fixed;
    z-index: 99999999;
    left: 0;
    top: 0;
    width: 100vw;
    min-width: 100vw;
    height: 100vh;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    height: -webkit-fill-available;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.6);
  `;
  const closeBtn = buildCloseButton();
  modal.appendChild(closeBtn);

  const content = buildModalContent();
  modal.appendChild(content);

  document.getElementsByTagName("body")[0].appendChild(modal);
  closeBtnResponsivePositioning();
};

const buildModalContent = () => {
  // This is the actual card that will hold the iframe
  const contentContainer = document.createElement("div");
  contentContainer.class = "re-modal-content";
  contentContainer.id = modalContentID;
  contentContainer.style.cssText = `
    background-color: #fefefe;
    padding: 0;
    border-radius: 20px;
    width: 85%;
    height: 85%;
    margin: 0 auto;
    opacity: 0;
  `;
  const iframeElem = buildIframe();
  contentContainer.appendChild(iframeElem);
  return contentContainer;
};

const buildCloseButton = () => {
  const close = document.createElement("span");
  close.innerHTML = "×";
  close.id = modalCloseID;
  close.style.cssText = `
    font-size: 36px;
    font-weight: 500;
    position: absolute;
    color: white;
    cursor: pointer;
  `;
  close.addEventListener("click", animateCloseModal);
  return close;
};

const buildIframe = () => {
  const iframe = document.createElement("iframe");
  iframe.id = iframeID;
  iframe.src = "about:blank";
  iframe.style.cssText = `
    border: none;
    border-radius: 16px;
    height: 100% !important;
    width: 100% !important;
`;
  return iframe;
};

const closeBtnResponsivePositioning = () => {
  // Makes sure the close button is properly positioned on large and small screens
  const modalCloseElem = document.getElementById(modalCloseID);
  if (!modalCloseElem) {
    // pass this statement
  } else if (window.innerWidth < 425) {
    modalCloseElem.style.top = "1.5vh";
    modalCloseElem.style.right = "2vw";
  } else if (window.innerWidth < 768) {
    modalCloseElem.style.top = "2.5vh";
    modalCloseElem.style.right = "2vw";
  } else if (window.innerHeight < 728) {
    modalCloseElem.style.top = "3.5vh";
    modalCloseElem.style.right = "4.8vw";
  } else {
    modalCloseElem.style.top = "4vh";
    modalCloseElem.style.right = "5vw";
  }
};

// Listens for resize and runs the close button postioning function
window.addEventListener("resize", closeBtnResponsivePositioning);

window.onclick = outsideModalClickEvent = (event) => {
  const modal = document.getElementById(modalID);
  if (event.target == modal) {
    animateCloseModal();
  }
};

const animateOpenModal = () => {
  const elem = document.getElementById(modalContentID);
  const id = setInterval(
    (frame = () => {
      if (Number.parseInt(elem.style.opacity) > 1) {
        clearInterval(id);
        elem.style.opacity = 1;
      } else {
        elem.style.opacity = Number.parseFloat(elem.style.opacity) + 0.06;
      }
    }),
    6
  );
};

const animateCloseModal = () => {
  const elem = document.getElementById(modalContentID);
  const idClose = setInterval(
    (frameClose = () => {
      if (Number.parseFloat(elem.style.opacity) < 0) {
        clearInterval(idClose);
        document.getElementById(modalID).style.display = "none";
        document.getElementById(iframeID).src = "about:blank";
        elem.style.opacity = 0;
      } else {
        elem.style.opacity = Number.parseFloat(elem.style.opacity) - 0.05;
      }
    }),
    5
  );
};