<!doctype html>
<html>
<head>
<meta charset=utf-8>
<!-- Fake favicon, to avoid extra request to server -->
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<title>React Native Debugger</title>
<script>
(function() {

var sessionID = window.localStorage.getItem('sessionID');
window.localStorage.removeItem('sessionID');

window.onbeforeunload = function() {
  if (sessionID) {
    return 'If you reload this page, it is going to break the debugging session. ' +
      'You should ⌘+R in the iOS simulator to reload.';
  }
};

function setStatus(status) {
  document.getElementById('status').innerHTML = status;
}

var messageHandlers = {
  // This method is a bit hacky. Catalyst asks for a new clean JS runtime.
  // The easiest way to do this is to reload this page. That also means that
  // web socket connection will be lost. To send reply back we need to remember
  // message id
  'prepareJSRuntime': function(message) {
    window.onbeforeunload = undefined;
    window.localStorage.setItem('sessionID', message.id);
    window.location.reload();
  },
  'executeApplicationScript:sourceURL:onComplete:': function(message, sendReply) {
    for (var key in message.inject) {
      window[key] = JSON.parse(message.inject[key]);
    }
    loadScript(message.url, sendReply.bind(null, null));
  },
  'executeJSCall:method:arguments:callback:': function(message, sendReply) {
    var returnValue = [[], [], [], [], []];
    try {
      if (window && window.require) {
        returnValue = window.require(message.moduleName)[message.moduleMethod].apply(null, message.arguments);
      }
    } finally {
      sendReply(JSON.stringify(returnValue));
    }
  }
}

var ws = new WebSocket('ws://' + window.location.host + '/debugger-proxy');

ws.onopen = function() {
  if (sessionID) {
    setStatus('Debugger session #' + sessionID + ' active');
    ws.send(JSON.stringify({replyID: parseInt(sessionID, 10)}));
  } else {
    setStatus('Waiting for simulator');
  }
}

ws.onmessage = function(message) {
  var object = JSON.parse(message.data);
  var sendReply = function(result) {
    ws.send(JSON.stringify({replyID: object.id, result: result}));
  }
  var handler = messageHandlers[object.method];
  if (handler) {
    handler(object, sendReply);
  } else {
    console.warn('Unknown method: ' + object.method);
  }
}

ws.onclose = function() {
  setStatus('Disconnected from proxy. Is node server running?');
}

function loadScript(src, callback) {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = src;
  script.onload = callback;
  document.head.appendChild(script);
}

})();
</script>
<style type="text/css">
  .shortcut {
    font-family: monospace;
    color: #eee;
    background-color: #333;
    padding: 4px;
    border-radius: 4px;
    letter-spacing: 3px;
  }
  body {
    font-size: large;
  }
</style>
</head>
<body>
  <p>
    React Native JS code runs inside this Chrome tab
  </p>
  <p>Press <span class="shortcut">⌘⌥J</span> to open Developer Tools. Enable <a href="http://stackoverflow.com/a/17324511/232122" target="_blank">Pause On Caught Exceptions</a> for a better debugging experience.</p>
  <p>Status: <span id="status">Loading</span></p>
</body>
</html>