// TODO this whole code can be improved more
(function () {
  const MAX_RETRIES = 50;
  const DELAY = 100;

  function warn(message) {
    // eslint-disable-next-line no-console
    console && console.warn && console.warn(`[WARNING] ${message}`);
  }

  function createModal(appName) {
    // TODO: Replace the styles with the CDN link to the neetomolecules/PageLoader stylesheet once https://github.com/bigbinary/neeto-engineering-web/issues/779 is resolved.
    return `
      <style>
        body[data-neetocal-modal-open] {
          overflow: hidden !important;
        }
        #${appName}-modal {
          display: none;
          cursor: pointer;
          opacity: 1;
          background: rgb(5,5,5, 0.8);
          position: fixed;
          inset: 0px;
          z-index: 99999;
          height: 100%;
          width: 100%;
          overflow-y: auto;
          box-sizing: border-box;
        }
        #${appName}-embed-container {
          opacity: 1;
          position: fixed;
          width: 100%;
          height: 100%;
          max-height: 100%;
          z-index: 10001;
          overflow-y: auto;
          overflow-x: hidden;
          display: grid;
          justify-content: center;
          align-items: center;
          padding-left: 16px;
          padding-right: 16px;
          padding-top: 42px;
          padding-bottom: 42px;
          box-sizing: border-box;
        }
        @media (max-width: 380px) {
          #${appName}-embed-container {
            padding: 0;
          }
        }
    </style>
    <div id="${appName}-embed-container"></div>
  `;
  }

  function createLoader(appName) {
    return `
    <style>
      #${appName}-loader {
        position: fixed;
        left: calc(50% - 18px);
        top: calc(50% - 18px);
        width: 36px;
        aspect-ratio: 1;
        border-radius: 50%;
        border: 5px solid rgb(0, 128, 104);
        box-sizing: border-box;
        animation: neeto-molecules-pageloader-anim1 0.8s infinite linear alternate, neeto-molecules-pageloader-anim2 1.6s infinite linear;
      }
      @keyframes neeto-molecules-pageloader-anim1 {
        0% {
          clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
        }

        12.5% {
          clip-path: polygon(
            50% 50%,
            0 0,
            50% 0%,
            100% 0%,
            100% 0%,
            100% 0%,
            100% 0%
          );
        }

        25% {
          clip-path: polygon(
            50% 50%,
            0 0,
            50% 0%,
            100% 0%,
            100% 100%,
            100% 100%,
            100% 100%
          );
        }

        50% {
          clip-path: polygon(
            50% 50%,
            0 0,
            50% 0%,
            100% 0%,
            100% 100%,
            50% 100%,
            0% 100%
          );
        }

        62.5% {
          clip-path: polygon(
            50% 50%,
            100% 0,
            100% 0%,
            100% 0%,
            100% 100%,
            50% 100%,
            0% 100%
          );
        }

        75% {
          clip-path: polygon(
            50% 50%,
            100% 100%,
            100% 100%,
            100% 100%,
            100% 100%,
            50% 100%,
            0% 100%
          );
        }

        100% {
          clip-path: polygon(
            50% 50%,
            50% 100%,
            50% 100%,
            50% 100%,
            50% 100%,
            50% 100%,
            0% 100%
          );
        }
      }

      @keyframes neeto-molecules-pageloader-anim2 {
        0% {
          transform: scaleY(1) rotate(0deg);
        }

        49.99% {
          transform: scaleY(1) rotate(135deg);
        }

        50% {
          transform: scaleY(-1) rotate(0deg);
        }

        100% {
          transform: scaleY(-1) rotate(-135deg);
        }
      }
    </style>
    <div id="${appName}-loader"></div>
  `;
  }

  function createCloseIcon(appName) {
    return `
    <style>
      #close-${appName} {
        display: flex;
        align-items: center;
        cursor: pointer;
        position: absolute;
        right: 16px;
        top: 16px;
        width: 32px;
        height: 32px;
        z-index: 10005;
        color: rgb(18, 18, 18);
        border-radius: 5px;
        background-color: rgb(255, 255, 255);
        box-shadow: inset 0 0 0 1px rgba(194, 200, 204);
        border: none;
        box-sizing: border-box;
      }
      #close-${appName}:hover {
        opacity: 1;
        background-color: rgb(248, 249, 249);
      }
      #close-${appName}:before, #close-${appName}:after {
        position: absolute;
        left: 15px;
        content: ' ';
        height: 20px;
        width: 2px;
        background-color: black;
        border-radius: 1px;
      }
      #close-${appName}:before {
        transform: rotate(45deg);
      }
      #close-${appName}:after {
        transform: rotate(-45deg);
      }
    </style>
    <div><button id="close-${appName}"></button></div>
  `;
  }

  function embedButtonStyles(appName) {
    return `
  <style>
  #${appName}-floating-popup-btn {
    position: fixed;
    z-index: 9999;
    display: inline-flex !important;
    align-items: center;
    padding: 6px 8px;
    gap: 4px;
    font-size: 16px;
    font-weight: 500;
    line-height: 16px;
    border-radius: 4px;
    border: none;
    outline: none;
    min-width: 0;
    cursor: pointer;
    padding: 8px 16px;
    gap: 8px;
    color: #fff;
    background-color: #6f14ed;
    margin: 5rem;
    bottom: 0;
    box-sizing: border-box;
  }
  </style>
  `;
  }

  function createButton(values, appName) {
    const style = values;
    const content = `<span>${style.btnText}</span>`;
    let btn = document.getElementById(`${appName}-floating-popup-btn`);
    if (!btn) {
      btn = document.createElement("button");
    }
    btn.innerHTML = content;
    btn.id = `${appName}-floating-popup-btn`;
    btn.style.backgroundColor = style.btnColor;
    btn.style.color = style.btnTextColor;
    style.btnPosition === "bottomRight"
      ? (btn.style.right = 0)
      : (btn.style.left = 0);
    document.body.appendChild(btn);
  }

  function displayWarnings(popupButton, embedLink) {
    if (!popupButton) warn(`The element was not found in the DOM tree`);
    if (!embedLink) warn(`Invalid 'embedLink'`);
  }

  function iframeStyles(appName) {
    return `
    <style>
      #${appName}-iframe {
        border: 0px;
        border-radius: 12px;
        max-width: 100%;
        width: 1080px;
        margin-top: 16px;
        margin-bottom: 16px;
      }
      @media (max-width: 380px) {
        #${appName}-iframe {
          margin-top: 0;
          margin-bottom: 0;
          border-radius: 0;
        }
      }
    </style>`;
  }

  function addIframe(embedLink, appName) {
    const iframe = document.createElement("iframe");
    iframe.src = embedLink;
    iframe.id = `${appName}-iframe`;
    iframe.allow = "clipboard-write *";

    // Check if isSidebarAndCoverImgHidden is in the URL and set width accordingly
    let isSidebarAndCoverImgHidden = false;
    try {
      const url =
        typeof embedLink === "string" ? new URL(embedLink) : embedLink;
      isSidebarAndCoverImgHidden =
        url.searchParams?.get("isSidebarAndCoverImgHidden") === "true";
    } catch (_) {
      // If URL parsing fails, check if the string contains the parameter
      isSidebarAndCoverImgHidden =
        typeof embedLink === "string" &&
        embedLink.includes("isSidebarAndCoverImgHidden=true");
    }

    iframe.style.width = isSidebarAndCoverImgHidden ? "780px" : "1080px";

    iframe.onload = () => {
      document.getElementById(`${appName}-loader`).style.display = "none";
    };

    const embedAppContainer = document.getElementById(
      `${appName}-embed-container`
    );
    embedAppContainer.appendChild(iframe);
  }

  function openModal(iframeLink, appName) {
    document.getElementById(`${appName}-loader`).style.display = "block";

    const embedAppModal = document.getElementById(`${appName}-modal`);
    embedAppModal.style.display = "block";

    document.body.setAttribute("data-neetocal-modal-open", "true");

    const iframe = document.getElementById(`${appName}-iframe`);
    if (!iframe) addIframe(iframeLink, appName);
  }

  function closeModal(appName) {
    const embedAppModal = document.getElementById(`${appName}-modal`);
    embedAppModal.style.display = "none";

    document.body.removeAttribute("data-neetocal-modal-open");

    const embedAppContainer = document.getElementById(
      `${appName}-embed-container`
    );
    embedAppContainer.innerHTML = "";
  }

  function embedContent(popupButton, iframeLink, appName = "NeetoCal") {
    displayWarnings(popupButton, iframeLink);

    const modal = document.getElementById(`${appName}-modal`);

    if (!modal) {
      const ncWrapper = document.createElement("div");
      ncWrapper.id = `${appName}-modal`;
      ncWrapper.innerHTML += createModal(appName);
      ncWrapper.innerHTML += createLoader(appName);
      ncWrapper.innerHTML += createCloseIcon(appName);
      ncWrapper.innerHTML += embedButtonStyles(appName);
      ncWrapper.innerHTML += iframeStyles(appName);

      document.body.appendChild(ncWrapper);
    }

    popupButton.addEventListener("click", () => {
      openModal(iframeLink, appName);
    });

    document
      .getElementById(`${appName}-modal`)
      .addEventListener("click", () => closeModal(appName));
    document
      .getElementById(`close-${appName}`)
      .addEventListener("click", () => closeModal(appName));
  }

  function embedFloatingPopupButton(iframeLink, styles, appName) {
    createButton(styles, appName);
    const btn = document.querySelector(`#${appName}-floating-popup-btn`);
    embedContent(btn, iframeLink);
  }

  const appendEmbedUrlToElement =
    (iframeLink, styles, elementSelector) => element => {
      const iframeId = `iframe-${btoa(elementSelector)}`;

      const iframe =
        document.getElementById(iframeId) || document.createElement("iframe");

      iframe.id = iframeId;
      iframe.src = iframeLink;

      if (styles.height || styles.width) {
        // Backwards compatibility for old format
        iframe.height = styles.height;
        iframe.width = styles.width;
      } else {
        iframe.style = styles;
      }

      iframe.style.border = "none";
      iframe.allow = "clipboard-write *";
      element.append(iframe);
    };

  function getElementsAfterDomInsert(elementSelector, callback) {
    let attempts = 0;

    const intervalId = setInterval(() => {
      const element = document.querySelector(elementSelector);

      if (element) {
        clearInterval(intervalId);
        callback(element);
      } else if (attempts >= MAX_RETRIES) {
        clearInterval(intervalId);
        console.error(
          "Couldn't find the specified elements in the DOM. Please verify the elementSelector."
        );
      }

      attempts++;
    }, DELAY);
  }

  function inlineEmbed({ iframeLink, styles, elementSelector }) {
    const embedHandler = () =>
      getElementsAfterDomInsert(
        elementSelector,
        appendEmbedUrlToElement(iframeLink, styles, elementSelector)
      );

    if (document.readyState === "loading")
      window.addEventListener("load", embedHandler);
    else embedHandler();
  }

  function embedContentOnElements(elementSelector, iframeLink, appName) {
    const embedHandler = () =>
      getElementsAfterDomInsert(elementSelector, element =>
        embedContent(element, iframeLink, appName)
      );

    if (document.readyState === "loading")
      window.addEventListener("DOMContentLoaded", embedHandler);
    else embedHandler();
  }

  function embedNeetoCal(...args) {
    const firstArgument = args[0];

    if (firstArgument instanceof Element) {
      embedContent(...args);
      return;
    }

    const {
      type,
      meetingSlug,
      id,
      organization,
      styles,
      elementSelector,
      env = "production",
      kind = "meeting",
      isSidebarAndCoverImgHidden = "false",
      isSidebarHidden = "false",
      isImageAndTitleHidden = "false",
      shouldForwardQueryParams = "false",
      extraParams = {}, // Deprecated on 2025 May 8
      queryParams = {},
    } = firstArgument;

    const baseUrl = {
      production: `https://${organization}.neetocal.com`,
      staging: `https://${organization}.neetocal.net`,
      development: `http://${organization}.lvh.me:9026`,
    };

    const getApiPath = () => {
      if (kind === "routingForm") {
        return `embed/routing-forms/${id}`;
      } else if (kind === "introPage") {
        return `embed/intro-pages/${id}`;
      } else {
        return !!id ? `embed/${id}` : meetingSlug;
      }
    };

    const appendQueryParamsToUrl = url => {
      const params = new URLSearchParams();

      if (isSidebarAndCoverImgHidden === "true" || isSidebarHidden === "true") {
        params.set("isSidebarAndCoverImgHidden", "true");
      }

      if (isImageAndTitleHidden === "true") {
        params.set("isImageAndTitleHidden", "true");
      }

      // Automatically enable dynamicHeight for popup types
      if (type === "floatingPopup" || type === "elementClick") {
        params.set("dynamicHeight", "true");
      }

      const mergedParams = { ...queryParams, ...extraParams };
      if (shouldForwardQueryParams === "true") {
        const parentQueryParams = window.parent.location.search;
        const parentParams = new URLSearchParams(parentQueryParams);

        for (const [key, value] of parentParams) {
          params.set(key, value);
        }
      }

      Object.keys(mergedParams).forEach(key => {
        params.set(key, mergedParams[key]);
      });

      url.search = params.toString();

      return url;
    };

    const getIframeLink = () => {
      const apiPath = new URL(getApiPath(), baseUrl[env]);

      return appendQueryParamsToUrl(apiPath);
    };

    const iframeLink = getIframeLink();
    const appName = "NeetoCal";

    if (type === "inline") inlineEmbed({ iframeLink, styles, elementSelector });

    if (type === "floatingPopup") {
      if (
        document.readyState === "interactive" ||
        document.readyState === "complete"
      ) {
        embedFloatingPopupButton(iframeLink, styles, appName);
      }
      document.addEventListener("DOMContentLoaded", function () {
        embedFloatingPopupButton(iframeLink, styles, appName);
      });
    }

    if (type === "elementClick") {
      embedContentOnElements(elementSelector, iframeLink, appName);
    }
  }

  if (!window.__neetoCalGlobalHeightListenerAdded) {
    const onNeetoCalHeightMessage = event => {
      try {
        const isHeightChangeEvent =
          event?.data?.type === "neeto-cal-height-change-event";
        if (!isHeightChangeEvent) return;

        const newHeight = Number(event.data.height);
        const iframes = document.getElementsByTagName("iframe");

        for (let i = 0; i < iframes.length; i++) {
          const frame = iframes[i];
          if (frame.contentWindow === event.source) {
            frame.style.height = `${Math.ceil(newHeight)}px`;
            break;
          }
        }
      } catch (_) {
        // Silently ignore errors
      }
    };

    window.addEventListener("message", onNeetoCalHeightMessage);
    window.__neetoCalGlobalHeightListenerAdded = true;
  }

  window.neetoCal = {
    q: window.neetoCal?.q || [],
    embed: embedNeetoCal,
    embedFloatingPopupButton,
  };

  neetoCal.q = neetoCal.q?.filter(
    args => embedNeetoCal.apply(null, args) && false
  );
})();