window.addEventListener('message', postMessageBitPayWidgetToParent);

function initializeBitPayCryptoWidget(flow) {
  const iframeContainer = document.getElementById('bitpay-widget-container');
  if (iframeContainer) {
    const iframe = document.createElement('iframe');
    iframe.src = formatSrc(flow);
    iframe.setAttribute('id', 'bitpay-widget');
    iframe.setAttribute('scrolling', 'no');
    iframe.setAttribute('data-query-params', location.search);
    iframe.style.width = '100%';
    iframe.style.height = '100%';
    iframe.style.border = 'none';
    iframe.style.borderRadius = 'inherit';
    iframe.style.flex = '1';

    iframeContainer.innerHTML = '';
    iframeContainer.appendChild(iframe);
  }
}

function postMessageBitPayWidgetToParent(event) {
  const isWidgetMessage = event.data.channel === 'bitpay-widget';
  const isMounted = event.data.payload === 'mounted';
  if (!isWidgetMessage || !isMounted) {
    return;
  }

  const bitpayWidget = document.querySelector('#bitpay-widget');
  const queryParams = bitpayWidget.getAttribute('data-query-params');
  const data = {
    channel: 'parent',
    payload: {
      queryParams,
      url: window.location.href,
    },
  };

  bitpayWidget.contentWindow.postMessage(data, '*');
}

function formatSrc(flow) {
  const isBitPayHost =
    window.location.host === 'bitpay.com' || /\.bitpay\.com$/.test(window.location.host);
  const host = isBitPayHost ? window.location.host : 'bitpay.com';
  const hostAndBaseName = `https://${host}/crypto-widget`;

  switch (flow) {
    case 'buy':
      return `${hostAndBaseName}/buy`;
    case 'sell':
      return `${hostAndBaseName}/sell`;
    case 'swap':
      return `${hostAndBaseName}/swap`;
    default:
      return `${hostAndBaseName}/buy`;
  }
}