"use strict";
import { vec4, vec3, mat4, mat3,quat, vec2 } from "gl-matrix";
// Compute the view frustum in world space from the provided
// column major projection * view matrix
var Frustum = function (projView) {
  var rows = [vec4.create(), vec4.create(), vec4.create(), vec4.create()];
  for (var i = 0; i < rows.length; ++i) {
    rows[i] = vec4.set(
      rows[i],
      projView[i],
      projView[4 + i],
      projView[8 + i],
      projView[12 + i]
    );
  }

  this.planes = [
    // -x plane
    vec4.add(vec4.create(), rows[3], rows[0]),
    // +x plane
    vec4.sub(vec4.create(), rows[3], rows[0]),
    // -y plane
    vec4.add(vec4.create(), rows[3], rows[1]),
    // +y plane
    vec4.sub(vec4.create(), rows[3], rows[1]),
    // -z plane
    vec4.add(vec4.create(), rows[3], rows[2]),
    // +z plane
    vec4.sub(vec4.create(), rows[3], rows[2]),
  ];

  // Normalize the planes
  for (var i = 0; i < this.planes.length; ++i) {
    var s =
      1.0 /
      Math.sqrt(
        this.planes[i][0] * this.planes[i][0] +
          this.planes[i][1] * this.planes[i][1] +
          this.planes[i][2] * this.planes[i][2]
      );
    this.planes[i][0] *= s;
    this.planes[i][1] *= s;
    this.planes[i][2] *= s;
    this.planes[i][3] *= s;
  }

  // Compute the frustum points as well
  var invProjView = mat4.invert(mat4.create(), projView);
  this.points = [
    // x_l, y_l, z_l
    vec4.set(vec4.create(), -1, -1, -1, 1),
    // x_h, y_l, z_l
    vec4.set(vec4.create(), 1, -1, -1, 1),
    // x_l, y_h, z_l
    vec4.set(vec4.create(), -1, 1, -1, 1),
    // x_h, y_h, z_l
    vec4.set(vec4.create(), 1, 1, -1, 1),
    // x_l, y_l, z_h
    vec4.set(vec4.create(), -1, -1, 1, 1),
    // x_h, y_l, z_h
    vec4.set(vec4.create(), 1, -1, 1, 1),
    // x_l, y_h, z_h
    vec4.set(vec4.create(), -1, 1, 1, 1),
    // x_h, y_h, z_h
    vec4.set(vec4.create(), 1, 1, 1, 1),
  ];
  for (var i = 0; i < 8; ++i) {
    this.points[i] = vec4.transformMat4(
      this.points[i],
      this.points[i],
      invProjView
    );
    this.points[i][0] /= this.points[i][3];
    this.points[i][1] /= this.points[i][3];
    this.points[i][2] /= this.points[i][3];
    this.points[i][3] = 1.0;
  }
};

// Check if the box is contained in the Frustum
// The box should be [x_lower, y_lower, z_lower, x_upper, y_upper, z_upper]
// This is done using Inigo Quilez's approach to help with large
// bounds: https://www.iquilezles.org/www/articles/frustumcorrect/frustumcorrect.htm
Frustum.prototype.containsBox = function (box) {
  // Test the box against each plane
  var vec = vec4.create();
  var out = 0;
  for (var i = 0; i < this.planes.length; ++i) {
    out = 0;
    // x_l, y_l, z_l
    vec4.set(vec, box[0], box[1], box[2], 1.0);
    out += vec4.dot(this.planes[i], vec) < 0.0 ? 1 : 0;
    // x_h, y_l, z_l
    vec4.set(vec, box[3], box[1], box[2], 1.0);
    out += vec4.dot(this.planes[i], vec) < 0.0 ? 1 : 0;
    // x_l, y_h, z_l
    vec4.set(vec, box[0], box[4], box[2], 1.0);
    out += vec4.dot(this.planes[i], vec) < 0.0 ? 1 : 0;
    // x_h, y_h, z_l
    vec4.set(vec, box[3], box[4], box[2], 1.0);
    out += vec4.dot(this.planes[i], vec) < 0.0 ? 1 : 0;
    // x_l, y_l, z_h
    vec4.set(vec, box[0], box[1], box[5], 1.0);
    out += vec4.dot(this.planes[i], vec) < 0.0 ? 1 : 0;
    // x_h, y_l, z_h
    vec4.set(vec, box[3], box[1], box[5], 1.0);
    out += vec4.dot(this.planes[i], vec) < 0.0 ? 1 : 0;
    // x_l, y_h, z_h
    vec4.set(vec, box[0], box[4], box[5], 1.0);
    out += vec4.dot(this.planes[i], vec) < 0.0 ? 1 : 0;
    // x_h, y_h, z_h
    vec4.set(vec, box[3], box[4], box[5], 1.0);
    out += vec4.dot(this.planes[i], vec) < 0.0 ? 1 : 0;

    if (out == 8) {
      return false;
    }
  }

  // Test the frustum against the box
  out = 0;
  for (var i = 0; i < 8; ++i) {
    out += this.points[i][0] > box[3] ? 1 : 0;
  }
  if (out == 8) {
    return false;
  }

  out = 0;
  for (var i = 0; i < 8; ++i) {
    out += this.points[i][0] < box[0] ? 1 : 0;
  }
  if (out == 8) {
    return false;
  }

  out = 0;
  for (var i = 0; i < 8; ++i) {
    out += this.points[i][1] > box[4] ? 1 : 0;
  }
  if (out == 8) {
    return false;
  }

  out = 0;
  for (var i = 0; i < 8; ++i) {
    out += this.points[i][1] < box[1] ? 1 : 0;
  }
  if (out == 8) {
    return false;
  }

  out = 0;
  for (var i = 0; i < 8; ++i) {
    out += this.points[i][2] > box[5] ? 1 : 0;
  }
  if (out == 8) {
    return false;
  }

  out = 0;
  for (var i = 0; i < 8; ++i) {
    out += this.points[i][2] < box[2] ? 1 : 0;
  }
  if (out == 8) {
    return false;
  }
  return true;
};

var Shader = function (gl, vertexSrc, fragmentSrc) {
  var self = this;
  this.program = compileShader(gl, vertexSrc, fragmentSrc);

  var regexUniform = /uniform[^;]+[ ](\w+);/g;
  var matchUniformName = /uniform[^;]+[ ](\w+);/;

  this.uniforms = {};

  var vertexUnifs = vertexSrc.match(regexUniform);
  var fragUnifs = fragmentSrc.match(regexUniform);

  if (vertexUnifs) {
    vertexUnifs.forEach(function (unif) {
      var m = unif.match(matchUniformName);
      self.uniforms[m[1]] = -1;
    });
  }
  if (fragUnifs) {
    fragUnifs.forEach(function (unif) {
      var m = unif.match(matchUniformName);
      self.uniforms[m[1]] = -1;
    });
  }

  for (var unif in this.uniforms) {
    this.uniforms[unif] = gl.getUniformLocation(this.program, unif);
  }
};

Shader.prototype.use = function (gl) {
  gl.useProgram(this.program);
};

// Compile and link the shaders vert and frag. vert and frag should contain
// the shader source code for the vertex and fragment shaders respectively
// Returns the compiled and linked program, or null if compilation or linking failed
var compileShader = function (gl, vert, frag) {
  var vs = gl.createShader(gl.VERTEX_SHADER);
  gl.shaderSource(vs, vert);
  gl.compileShader(vs);
  if (!gl.getShaderParameter(vs, gl.COMPILE_STATUS)) {
    alert("Vertex shader failed to compile, see console for log");
    console.log(gl.getShaderInfoLog(vs));
    return null;
  }

  var fs = gl.createShader(gl.FRAGMENT_SHADER);
  gl.shaderSource(fs, frag);
  gl.compileShader(fs);
  if (!gl.getShaderParameter(fs, gl.COMPILE_STATUS)) {
    alert("Fragment shader failed to compile, see console for log");
    console.log(gl.getShaderInfoLog(fs));
    return null;
  }

  var program = gl.createProgram();
  gl.attachShader(program, vs);
  gl.attachShader(program, fs);
  gl.linkProgram(program);
  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
    alert("Shader failed to link, see console for log");
    console.log(gl.getProgramInfoLog(program));
    return null;
  }
  return program;
};

var getGLExtension = function (gl, ext) {
  if (!gl.getExtension(ext)) {
    alert("Missing " + ext + " WebGL extension");
    return false;
  }
  return true;
};

/* The arcball camera will be placed at the position 'eye', rotating
 * around the point 'center', with the up vector 'up'. 'screenDims'
 * should be the dimensions of the canvas or region taking mouse input
 * so the mouse positions can be normalized into [-1, 1] from the pixel
 * coordinates.
 */
export var ArcballCamera = function (eye, center, up, zoomSpeed, screenDims) {
  var veye = vec3.set(vec3.create(), eye[0], eye[1], eye[2]);
  var vcenter = vec3.set(vec3.create(), center[0], center[1], center[2]);
  var vup = vec3.set(vec3.create(), up[0], up[1], up[2]);
  vec3.normalize(vup, vup);

  var zAxis = vec3.sub(vec3.create(), vcenter, veye);
  var viewDist = vec3.len(zAxis);
  vec3.normalize(zAxis, zAxis);

  var xAxis = vec3.cross(vec3.create(), zAxis, vup);
  vec3.normalize(xAxis, xAxis);

  var yAxis = vec3.cross(vec3.create(), xAxis, zAxis);
  vec3.normalize(yAxis, yAxis);

  vec3.cross(xAxis, zAxis, yAxis);
  vec3.normalize(xAxis, xAxis);

  this.zoomSpeed = zoomSpeed;
  this.invScreen = [1.0 / screenDims[0], 1.0 / screenDims[1]];

  this.centerTranslation = mat4.fromTranslation(mat4.create(), center);
  mat4.invert(this.centerTranslation, this.centerTranslation);

  var vt = vec3.set(vec3.create(), 0, 0, -1.0 * viewDist);
  this.translation = mat4.fromTranslation(mat4.create(), vt);

  var rotMat = mat3.fromValues(
    xAxis[0],
    xAxis[1],
    xAxis[2],
    yAxis[0],
    yAxis[1],
    yAxis[2],
    -zAxis[0],
    -zAxis[1],
    -zAxis[2]
  );
  mat3.transpose(rotMat, rotMat);
  this.rotation = quat.fromMat3(quat.create(), rotMat);
  quat.normalize(this.rotation, this.rotation);

  this.camera = mat4.create();
  this.invCamera = mat4.create();
  this.updateCameraMatrix();
};

ArcballCamera.prototype.rotate = function (prevMouse, curMouse) {
  var mPrev = vec2.set(
    vec2.create(),
    clamp(prevMouse[0] * 2.0 * this.invScreen[0] - 1.0, -1.0, 1.0),
    clamp(1.0 - prevMouse[1] * 2.0 * this.invScreen[1], -1.0, 1.0)
  );

  var mCur = vec2.set(
    vec2.create(),
    clamp(curMouse[0] * 2.0 * this.invScreen[0] - 1.0, -1.0, 1.0),
    clamp(1.0 - curMouse[1] * 2.0 * this.invScreen[1], -1.0, 1.0)
  );

  var mPrevBall = screenToArcball(mPrev);
  var mCurBall = screenToArcball(mCur);
  // rotation = curBall * prevBall * rotation
  this.rotation = quat.mul(this.rotation, mPrevBall, this.rotation);
  this.rotation = quat.mul(this.rotation, mCurBall, this.rotation);

  this.updateCameraMatrix();
};

ArcballCamera.prototype.zoom = function (amount) {
  var vt = vec3.set(
    vec3.create(),
    0.0,
    0.0,
    amount * this.invScreen[1] * this.zoomSpeed
  );
  var t = mat4.fromTranslation(mat4.create(), vt);
  this.translation = mat4.mul(this.translation, t, this.translation);
  if (this.translation[14] >= -0.2) {
    this.translation[14] = -0.2;
  }
  this.updateCameraMatrix();
};

ArcballCamera.prototype.pan = function (mouseDelta) {
  var delta = vec4.set(
    vec4.create(),
    mouseDelta[0] * this.invScreen[0] * Math.abs(this.translation[14]),
    mouseDelta[1] * this.invScreen[1] * Math.abs(this.translation[14]),
    0,
    0
  );
  var worldDelta = vec4.transformMat4(vec4.create(), delta, this.invCamera);
  var translation = mat4.fromTranslation(mat4.create(), worldDelta);
  this.centerTranslation = mat4.mul(
    this.centerTranslation,
    translation,
    this.centerTranslation
  );
  this.updateCameraMatrix();
};

ArcballCamera.prototype.updateCameraMatrix = function () {
  // camera = translation * rotation * centerTranslation
  var rotMat = mat4.fromQuat(mat4.create(), this.rotation);
  this.camera = mat4.mul(this.camera, rotMat, this.centerTranslation);
  this.camera = mat4.mul(this.camera, this.translation, this.camera);
  this.invCamera = mat4.invert(this.invCamera, this.camera);
};

ArcballCamera.prototype.eyePos = function () {
  return [this.invCamera[12], this.invCamera[13], this.invCamera[14]];
};

ArcballCamera.prototype.eyeDir = function () {
  var dir = vec4.set(vec4.create(), 0.0, 0.0, -1.0, 0.0);
  dir = vec4.transformMat4(dir, dir, this.invCamera);
  dir = vec4.normalize(dir, dir);
  return [dir[0], dir[1], dir[2]];
};

ArcballCamera.prototype.upDir = function () {
  var dir = vec4.set(vec4.create(), 0.0, 1.0, 0.0, 0.0);
  dir = vec4.transformMat4(dir, dir, this.invCamera);
  dir = vec4.normalize(dir, dir);
  return [dir[0], dir[1], dir[2]];
};

var screenToArcball = function (p) {
  var dist = vec2.dot(p, p);
  if (dist <= 1.0) {
    return quat.set(quat.create(), p[0], p[1], Math.sqrt(1.0 - dist), 0);
  } else {
    var unitP = vec2.normalize(vec2.create(), p);
    // cgmath is w, x, y, z
    // glmatrix is x, y, z, w
    return quat.set(quat.create(), unitP[0], unitP[1], 0, 0);
  }
};
var clamp = function (a, min, max) {
  return a < min ? min : a > max ? max : a;
};

var pointDist = function (a, b) {
  var v = [b[0] - a[0], b[1] - a[1]];
  return Math.sqrt(Math.pow(v[0], 2.0) + Math.pow(v[1], 2.0));
};

var Buffer = function (capacity, dtype) {
  this.len = 0;
  this.capacity = capacity;
  if (dtype == "uint8") {
    this.buffer = new Uint8Array(capacity);
  } else if (dtype == "int8") {
    this.buffer = new Int8Array(capacity);
  } else if (dtype == "uint16") {
    this.buffer = new Uint16Array(capacity);
  } else if (dtype == "int16") {
    this.buffer = new Int16Array(capacity);
  } else if (dtype == "uint32") {
    this.buffer = new Uint32Array(capacity);
  } else if (dtype == "int32") {
    this.buffer = new Int32Array(capacity);
  } else if (dtype == "float32") {
    this.buffer = new Float32Array(capacity);
  } else if (dtype == "float64") {
    this.buffer = new Float64Array(capacity);
  } else {
    console.log("ERROR: unsupported type " + dtype);
  }
};

Buffer.prototype.append = function (buf) {
  if (this.len + buf.length >= this.capacity) {
    var newCap = Math.floor(
      Math.max(this.capacity * 1.5),
      this.len + buf.length
    );
    var tmp = new this.buffer.constructor(newCap);
    tmp.set(this.buffer);

    this.capacity = newCap;
    this.buffer = tmp;
  }
  this.buffer.set(buf, this.len);
  this.len += buf.length;
};

Buffer.prototype.clear = function () {
  this.len = 0;
};

Buffer.prototype.stride = function () {
  return this.buffer.BYTES_PER_ELEMENT;
};

Buffer.prototype.view = function (offset, length) {
  return new this.buffer.constructor(this.buffer.buffer, offset, length);
};

// Various utilities that don't really fit anywhere else

// Parse the hex string to RGB values in [0, 255]
var hexToRGB = function (hex) {
  var val = parseInt(hex.substr(1), 16);
  var r = (val >> 16) & 255;
  var g = (val >> 8) & 255;
  var b = val & 255;
  return [r, g, b];
};

// Parse the hex string to RGB values in [0, 1]
var hexToRGBf = function (hex) {
  var c = hexToRGB(hex);
  return [c[0] / 255.0, c[1] / 255.0, c[2] / 255.0];
};

/* The controller can register callbacks for various events on a canvas:
 *
 * mousemove: function(prevMouse, curMouse, evt)
 *     receives both regular mouse events, and single-finger drags (sent as a left-click),
 *
 * press: function(curMouse, evt)
 *     receives mouse click and touch start events
 *
 * wheel: function(amount)
 *     mouse wheel scrolling
 *
 * pinch: function(amount)
 *     two finger pinch, receives the distance change between the fingers
 *
 * twoFingerDrag: function(dragVector)
 *     two finger drag, receives the drag movement amount
 */
export var Controller = function () {
  this.mousemove = null;
  this.press = null;
  this.wheel = null;
  this.twoFingerDrag = null;
  this.pinch = null;
};

Controller.prototype.registerForCanvas = function (canvas) {
  var prevMouse = null;
  var mouseState = [false, false];
  var self = this;
  canvas.addEventListener("mousemove", function (evt) {
    evt.preventDefault();
    var rect = canvas.getBoundingClientRect();
    var curMouse = [evt.clientX - rect.left, evt.clientY - rect.top];
    if (!prevMouse) {
      prevMouse = [evt.clientX - rect.left, evt.clientY - rect.top];
    } else if (self.mousemove) {
      self.mousemove(prevMouse, curMouse, evt);
    }
    prevMouse = curMouse;
  });

  canvas.addEventListener("mousedown", function (evt) {
    evt.preventDefault();
    var rect = canvas.getBoundingClientRect();
    var curMouse = [evt.clientX - rect.left, evt.clientY - rect.top];
    if (self.press) {
      self.press(curMouse, evt);
    }
  });

  canvas.addEventListener("wheel", function (evt) {
    evt.preventDefault();
    if (self.wheel) {
      self.wheel(-evt.deltaY);
    }
  });

  canvas.oncontextmenu = function (evt) {
    evt.preventDefault();
  };

  var touches = {};
  canvas.addEventListener("touchstart", function (evt) {
    var rect = canvas.getBoundingClientRect();
    evt.preventDefault();
    for (var i = 0; i < evt.changedTouches.length; ++i) {
      var t = evt.changedTouches[i];
      touches[t.identifier] = [t.clientX - rect.left, t.clientY - rect.top];
      if (evt.changedTouches.length == 1 && self.press) {
        self.press(touches[t.identifier], evt);
      }
    }
  });

  canvas.addEventListener("touchmove", function (evt) {
    evt.preventDefault();
    var rect = canvas.getBoundingClientRect();
    var numTouches = Object.keys(touches).length;
    // Single finger to rotate the camera
    if (numTouches == 1) {
      if (self.mousemove) {
        var t = evt.changedTouches[0];
        var prevTouch = touches[t.identifier];
        var curTouch = [t.clientX - rect.left, t.clientY - rect.top];
        evt.buttons = 1;
        self.mousemove(prevTouch, curTouch, evt);
      }
    } else {
      var curTouches = {};
      for (var i = 0; i < evt.changedTouches.length; ++i) {
        var t = evt.changedTouches[i];
        curTouches[t.identifier] = [
          t.clientX - rect.left,
          t.clientY - rect.top,
        ];
      }

      // If some touches didn't change make sure we have them in
      // our curTouches list to compute the pinch distance
      // Also get the old touch points to compute the distance here
      var oldTouches = [];
      for (t in touches) {
        if (!(t in curTouches)) {
          curTouches[t] = touches[t];
        }
        oldTouches.push(touches[t]);
      }

      var newTouches = [];
      for (t in curTouches) {
        newTouches.push(curTouches[t]);
      }

      // Determine if the user is pinching or panning
      var motionVectors = [
        vec2.set(
          vec2.create(),
          newTouches[0][0] - oldTouches[0][0],
          newTouches[0][1] - oldTouches[0][1]
        ),
        vec2.set(
          vec2.create(),
          newTouches[1][0] - oldTouches[1][0],
          newTouches[1][1] - oldTouches[1][1]
        ),
      ];
      var motionDirs = [vec2.create(), vec2.create()];
      vec2.normalize(motionDirs[0], motionVectors[0]);
      vec2.normalize(motionDirs[1], motionVectors[1]);

      var pinchAxis = vec2.set(
        vec2.create(),
        oldTouches[1][0] - oldTouches[0][0],
        oldTouches[1][1] - oldTouches[0][1]
      );
      vec2.normalize(pinchAxis, pinchAxis);

      var panAxis = vec2.lerp(
        vec2.create(),
        motionVectors[0],
        motionVectors[1],
        0.5
      );
      vec2.normalize(panAxis, panAxis);

      var pinchMotion = [
        vec2.dot(pinchAxis, motionDirs[0]),
        vec2.dot(pinchAxis, motionDirs[1]),
      ];
      var panMotion = [
        vec2.dot(panAxis, motionDirs[0]),
        vec2.dot(panAxis, motionDirs[1]),
      ];

      // If we're primarily moving along the pinching axis and in the opposite direction with
      // the fingers, then the user is zooming.
      // Otherwise, if the fingers are moving along the same direction they're panning
      if (
        self.pinch &&
        Math.abs(pinchMotion[0]) > 0.5 &&
        Math.abs(pinchMotion[1]) > 0.5 &&
        Math.sign(pinchMotion[0]) != Math.sign(pinchMotion[1])
      ) {
        // Pinch distance change for zooming
        var oldDist = pointDist(oldTouches[0], oldTouches[1]);
        var newDist = pointDist(newTouches[0], newTouches[1]);
        self.pinch(newDist - oldDist);
      } else if (
        self.twoFingerDrag &&
        Math.abs(panMotion[0]) > 0.5 &&
        Math.abs(panMotion[1]) > 0.5 &&
        Math.sign(panMotion[0]) == Math.sign(panMotion[1])
      ) {
        // Pan by the average motion of the two fingers
        var panAmount = vec2.lerp(
          vec2.create(),
          motionVectors[0],
          motionVectors[1],
          0.5
        );
        panAmount[1] = -panAmount[1];
        self.twoFingerDrag(panAmount);
      }
    }

    // Update the existing list of touches with the current positions
    for (var i = 0; i < evt.changedTouches.length; ++i) {
      var t = evt.changedTouches[i];
      touches[t.identifier] = [t.clientX - rect.left, t.clientY - rect.top];
    }
  });

  var touchEnd = function (evt) {
    evt.preventDefault();
    for (var i = 0; i < evt.changedTouches.length; ++i) {
      var t = evt.changedTouches[i];
      delete touches[t.identifier];
    }
  };
  canvas.addEventListener("touchcancel", touchEnd);
  canvas.addEventListener("touchend", touchEnd);
};