const iframeURLChange = (iframe, callback) => {
  iframe.addEventListener('load', () => {
    setTimeout(() => {
      if (iframe?.contentWindow?.location) {
        callback(iframe.contentWindow.location);
      }
    }, 0);
  });
};

const removeIframe = async () => {
  const iframeSelector = document.querySelector(
    '.checkout-payment-iframe-wrapper'
  );

  if (!iframeSelector) {
    return;
  }

  iframeSelector.remove();
  document.body.style.overflow = 'auto';
};

export const showMobile3dIframe = (redirectUrl: string) => {
  const iframeWrapper = document.createElement('div');
  const iframe = document.createElement('iframe');
  const closeButton = document.createElement('div');

  iframeWrapper.className = 'checkout-payment-iframe-wrapper';
  closeButton.className = 'close-button';

  // iframe param is used to prevent header and footer rendering
  iframe.setAttribute(
    'src',
    redirectUrl.match(new RegExp(`^/orders/redirect-three-d/$`))
      ? `${redirectUrl}?iframe=true`
      : redirectUrl
  );
  closeButton.innerHTML = '&#x2715';
  closeButton.addEventListener('click', removeIframe);

  iframeWrapper.append(iframe, closeButton);
  document.body.appendChild(iframeWrapper);
  document.body.style.overflow = 'hidden';

  iframeURLChange(iframe, (location) => {
    if (location.origin !== window.location.origin) {
      return false;
    }

    const searchParams = new URLSearchParams(location.search);
    const isOrderCompleted = location.href.includes('/orders/completed');

    if (isOrderCompleted) {
      (window.parent as any)?.ReactNativeWebView?.postMessage?.(
        JSON.stringify({
          url: location.pathname
        })
      );

      if (localStorage.isMobileApp !== 'true') {
        window.location.href = location.pathname;
        return;
      }
    }

    if (
      searchParams.has('success') ||
      isOrderCompleted ||
      location.href.includes('/orders/checkout')
    ) {
      setTimeout(() => {
        removeIframe();
      }, 0);
    }
  });
};