// Welcome! require() some modules from npm (like you were using browserify)
// and then hit Run Code to run your code on the right side.
// Modules get downloaded from browserify-cdn and bundled in your browser.


const React = require('react');
const ReactDOM = require('react-dom');
const reglInit = require('regl')
const mat4 = require('gl-mat4')
const bunny = require('bunny')

const Stats = require('stats.js');
const updateStats = new Stats();
document.body.appendChild(updateStats.dom);
updateStats.showPanel(0);

const SPECTOR = require('spectorjs');
var s = new SPECTOR.Spector();
s.displayUI();

class Root extends React.Component {
	componentDidMount() {
    const regl = reglInit({
      canvas: this.refs.drawCanvas
    });

const drawBunny = regl({
  vert: `
  precision mediump float;
  attribute vec3 position;
  uniform mat4 model, view, projection;
  void main() {
    gl_Position = projection * view * model * vec4(position, 1);
  }`,

  frag: `
  precision mediump float;
  void main() {
    gl_FragColor = vec4(1, 1, 1, 1);
  }`,

  // this converts the vertices of the mesh into the position attribute
  attributes: {
    position: bunny.positions
  },

  // and this converts the faces fo the mesh into elements
  elements: bunny.cells,

  uniforms: {
    model: mat4.identity([]),
    view: ({tick}) => {
      const t = 0.01 * tick
      return mat4.lookAt([],
        [30 * Math.cos(t), 2.5, 30 * Math.sin(t)],
        [0, 2.5, 0],
        [0, 1, 0])
    },
    projection: ({viewportWidth, viewportHeight}) =>
      mat4.perspective([],
        Math.PI / 4,
        viewportWidth / viewportHeight,
        0.01,
        1000)
  }
});
                  regl.frame(() => {
                  updateStats.begin();
  regl.clear({
    depth: 1,
    color: [0, 0, 0, 1]
  })

  drawBunny()
            updateStats.end();
})
  }

  render() {
                  return React.createElement('canvas', {
                  //ref: "drawCanvas",
                  id: "draw-canvas"
                 }, null);
  }
}

ReactDOM.render(
  React.createElement(Root, null, null),
  document.getElementById('ui-root')
);