/**
 * This library runs on mobile devices so we can't use console.log for debugging. Instead, we can use this function to send debug information to a remote server or store it locally on the device.
 * Instead display the "payload" in a fixed position element on the screen
 * and hide it when that element is clicked. Create the element if it doesn't exist,
 * and update its content with the payload (any JSON data).
 */
export function debug(payload: any) {
  let debugElement = document.getElementById('debug-element');

  if (!debugElement) {
    debugElement = document.createElement('div');
    debugElement.id = 'debug-element';
    debugElement.style.position = 'fixed';
    debugElement.style.bottom = '0';
    debugElement.style.left = '0';
    debugElement.style.width = '100%';
    debugElement.style.maxHeight = '50%';
    debugElement.style.overflowY = 'auto';
    debugElement.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
    debugElement.style.color = 'white';
    debugElement.style.padding = '10px';
    debugElement.style.fontSize = '12px';
    debugElement.style.zIndex = '9999';
    debugElement.style.cursor = 'pointer';
    document.body.appendChild(debugElement);

    debugElement.addEventListener('click', () => {
      if (debugElement) {
        debugElement.style.display =
          debugElement.style.display === 'none' ? 'block' : 'none';
      }
    });
  }

  debugElement.textContent = JSON.stringify(payload, null, 2);
  debugElement.style.display = 'block';
}
