<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Debugger Demo</title>
  <script src="bin/debugger.js"></script>
  <script>
let index = 0;
let surface;

DebuggerInit({
  locateFile: (file) => '/node_modules/debugger/bin/'+file,
}).ready().then((Debugger) => {
  const player = new Debugger.SkpDebugPlayer();

  // Define an event handler for the file input dialog
  function readSkpFile(e){
    // Did the change event result in the file-input element specifing a file? (user might have cancelled the dialog)
    const file = e.target.files[0];
    if (!file) {
      return;
    }
    // create a callback for when the file finishes being read.
    const reader = new FileReader();
    reader.onload = function(e) {
      // Convert e.target.result (an ArrayBuffer) into a typedarray,
      // otherwise fileMem.set() below seems to have no effect.
      const fileContents = new Uint8Array(e.target.result);
      const size = fileContents.byteLength;
      // Allocate memory in wasm to hold the skp file selected by the user.
      const fileMemPtr = Debugger._malloc(size);
      // Make a typed array view of that memory
      let fileMem = new Uint8Array(Debugger.buffer, fileMemPtr, size);
      // Copy the file into it
      fileMem.set(fileContents);
      // Hand off pointer to wasm
      player.loadSkp(fileMemPtr, size);
      // From the loaded commands, Debugger now knows the bounds.
      let bounds = player.getBounds();
      // Resize our canvas to match
      canvas = document.getElementById('debugger_view');
      canvas.width = bounds.fRight - bounds.fLeft;
      canvas.height = bounds.fBottom - bounds.fTop;
      //Assume GPU selected initially
      surface = Debugger.MakeWebGLCanvasSurface(canvas);

      document.getElementById('command-count').innerHTML = player.getSize();
      player.setClipVizColor(0);
    };
    reader.readAsArrayBuffer(file);
  }

  function playFile() {
    interval = parseFloat(document.getElementById('interval').value);
    let intervalID = setInterval(function() {
        if (index < 789){
          player.drawTo(surface, index);
          surface.flush();
          index++;
        }
    }, interval);
  }

  // Discard canvas when switching between cpu/gpu backend because it's bound to a context.
  function replaceCanvas() {
      canvas = document.getElementById('debugger_view');
      let newCanvas = canvas.cloneNode(true);
      let parent = canvas.parentNode;
      parent.replaceChild(newCanvas, canvas);
  }

  document.getElementById('file-input')
    .addEventListener('change', readSkpFile);

  document.getElementById('play_button')
    .addEventListener('click', playFile);

  document.getElementById('overdraw')
    .addEventListener('change', function(e) {
      player.setOverdrawVis(e.target.checked);
    });

  document.getElementById('gpu_op_bounds')
    .addEventListener('change', function(e) {
      player.setGpuOpBounds(e.target.checked);
    });

  document.getElementById('clip_viz_color')
    .addEventListener('change', function(e) {
      // Remove the '#' from the hex color string.
      // prepend an alpha value (0x50 or about 30%)
      // then convert to an integer.
      colorInt = parseInt("50"+e.target.value.substring(1),16);
      player.setClipVizColor(colorInt);
    });

  document.getElementById('disable_clip_viz')
    .addEventListener('click', function(e) {
      // Setting the clip viz to transparent black makes it invisible.
      player.setClipVizColor(0);
    });

  document.getElementById('get_json_command_list')
    .addEventListener('click', function(e) {
      result = player.jsonCommandList(surface);
      console.log('getjsoncommandlist result '+result.substring(0,100)+'...');
      commands = JSON.parse(result);
      console.log('parsed json');
    });

  document.getElementById('backend_gpu')
    .addEventListener('change', function(e) {
      if (e.target.checked) {
        replaceCanvas();
        surface = Debugger.MakeWebGLCanvasSurface(document.getElementById('debugger_view'));
      }
    });

  document.getElementById('backend_cpu')
    .addEventListener('change', function(e) {
      if (e.target.checked) {
        replaceCanvas();
        surface = Debugger.MakeSWCanvasSurface(document.getElementById('debugger_view'));
      }
    });

});
  </script>
  </head>
  <body>
    <canvas id=debugger_view width=400 height=400></canvas>
    <div style="float:right">
      <input type="radio" name="backend" value="CPU" id="backend_cpu"> CPU
      <input type="radio" name="backend" value="WebGL" id="backend_gpu" checked> WebGL<br>
      <input type="file" id="file-input" /> | <span id="command-count">0</span> commands<br>
      <input type="button" id="play_button" value="Play" />
      command interval in ms
      <input type="text" id="interval" value="20" /><br>
      <input type="checkbox" id="overdraw" /> Overdraw vis<br>
      <input type="checkbox" id="gpu_op_bounds" /> GPU Op bounds<br>
      <input type="color" id="clip_viz_color" />Clip visualization color
      <input type="button" id="disable_clip_viz" value="Disable" /><br>
      <input type="button" id="get_json_command_list" value="Get JSON Command List" /><br>
    <div>
    <div style="float:clear"></div>
  </body>
</html>