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-redirection-iframe-wrapper'
  );

  const redirectionPaymentWrapper = document.querySelector(
    '.checkout-redirection-payment-wrapper'
  );

  const form = redirectionPaymentWrapper.querySelector('form') as HTMLElement;

  if (!iframeSelector) {
    return;
  }

  iframeSelector.remove();

  if (form) {
    form.style.display = 'block';
  }

  location.reload();
};

export const showRedirectionIframe = (redirectUrl: string) => {
  const iframeWrapper = document.createElement('div');
  const iframe = document.createElement('iframe');
  const closeButton = document.createElement('div');
  const redirectionPaymentWrapper = document.querySelector(
    '.checkout-redirection-payment-wrapper'
  );
  const form = redirectionPaymentWrapper.querySelector('form') as HTMLElement;

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

  iframe.setAttribute('src', redirectUrl);
  closeButton.innerHTML = '&#x2715';
  closeButton.addEventListener('click', removeIframe);

  iframeWrapper.append(iframe, closeButton);

  if (form) {
    form.style.display = 'none';
  }

  redirectionPaymentWrapper.appendChild(iframeWrapper);

  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)?.postMessage?.(
        JSON.stringify({
          url: location.pathname
        })
      );
    }

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