/**
  * returns the inverse of transformation matrix 
  * @readonly
  * @type {GLM.IArray}
  */
 public get InverseTransform(): GLM.IArray {
     if (this.mInverseTransVersion !== this.mVersion) {
         mat3.invert(this.mCachedInverse, this.mTransformation);
         this.mInverseTransVersion = this.mVersion;
     }
     //TODO should reset mIsTransformationDirty to false, maybe should also call an abstract function so children of this class can do some recalculations as well 
     return this.mCachedInverse;
 }

 constructor(
   readonly type: BoneType,
   readonly basis: Triple<vec3>,
   readonly prevJoint: vec3,
   readonly nextJoint: vec3,
   readonly width: number
 ) {
   const difference = vec3.subtract(vec3.create(), this.nextJoint, this.prevJoint);
   this.length = vec3.length(difference);
   this.basisMatrix = mat3.fromValues(
     this.basis[0][0], this.basis[0][1], this.basis[0][2],
     this.basis[1][0], this.basis[1][1], this.basis[1][2],
     this.basis[2][0], this.basis[2][1], this.basis[2][2]
   );
   this.left = mat3.determinant(this.basisMatrix) < 0;
   this.center = vec3.lerp(vec3.create(), this.prevJoint, this.nextJoint, 0.5);
   this.direction = Bone.createBoneDirection(this.basisMatrix);
   this.matrix = Bone.createBoneMatrix(this.basisMatrix, this.center, this.left);
 }

 /**
  * Creates Orthographic projection matrix 
  * 
  * @private
  * @param {number} width
  * @param {number} height
  */
 private createProjection(width: number, height: number) {
     this.mProjection = mat3.create();
     this.mProjection[0] = 2 / width;
     this.mProjection[4] = -2 / height;
     this.mProjection[6] = -1;
     this.mProjection[7] = 1;
     /*
         2 / width, 0, 0,
         0, -2 / height, 0,
         -1, 1, 1
     */
 }

  private constructor(
    data: HandData
  ) {
    this.armBasis = data.armBasis.map(basis => vec3.fromValues(...basis)) as Triple<vec3>;
    this.armWidth = data.armWidth;
    this.confidence = data.confidence;
    this.direction = vec3.fromValues(...data.direction);
    this.elbow = vec3.fromValues(...data.elbow);
    this.grabStrength = data.grabStrength;
    this.id = data.id;
    this.palmNormal = vec3.fromValues(...data.palmNormal);
    this.palmPosition = vec3.fromValues(...data.palmPosition);
    this.palmVelocity = vec3.fromValues(...data.palmVelocity);
    this.palmWidth = data.palmWidth;
    this.pinchStrength = data.pinchStrength;
    this.r = mat3.fromValues(
      data.r[0][0], data.r[0][1], data.r[0][2],
      data.r[1][0], data.r[1][1], data.r[1][2],
      data.r[2][0], data.r[2][1], data.r[2][2]
    );
    this.s = data.s;
    this.sphereCenter = vec3.fromValues(...data.sphereCenter);
    this.sphereRadius = data.sphereRadius;
    this.stabilizedPalmPosition = vec3.fromValues(...data.stabilizedPalmPosition);
    this.t = vec3.fromValues(...data.t);
    this.timeVisible = data.timeVisible;
    this.type = data.type;
    this.wrist = vec3.fromValues(...data.wrist);


    this.pointables = [];
    this.fingers = {};

    this.arm = new Bone(
      BoneType.arm,
      this.armBasis,
      this.elbow,
      this.wrist,
      this.armWidth
    );

    this.pitch = Math.atan2(this.direction[1], -this.direction[2]);
    this.yaw = Math.atan2(this.direction[0], -this.direction[2]);
    this.roll = Math.atan2(this.palmNormal[0], -this.palmNormal[1]);
  }

  constructor(){
    this.verticalFlipMatrix = mat2d.create();
    this.viewportToSquareMatrix = mat2d.create();
    this.viewportFromSquareMatrix = mat2d.create();
    this.mapToTileMatrix = mat2d.create();
    this.mapFromTileMatrix = mat2d.create();
    this.squareToMapMatrix = mat2d.create();
    this.squareFromMapMatrix = mat2d.create();
    this.clipToSquareMatrix = mat2d.create();
    this.clipFromSquareMatrix = mat2d.create();
    this.viewportToClipMatrix = mat2d.create();

    this.mapToViewportMatrix = mat3.create();

    mat2d.fromScaling(this.verticalFlipMatrix, [1, -1]);
    mat2d.fromScaling(this.squareToMapMatrix, [1, 1]);
    mat2d.invert(this.squareFromMapMatrix, this.squareToMapMatrix);

    this.setMapSize(128);
  }

  lambertFragmentShaderEs300
} from '../shaders/Lambert.glsl';
import {
  phongFragmentShaderEs100,
  phongFragmentShaderEs300
} from '../shaders/Phong.glsl';
import { vertexShaderEs100, vertexShaderEs300 } from '../shaders/Vertex.glsl';
import ShaderParser from '../utils/ShaderParser';
import { capabilities } from './Capabilities';
import * as CONSTANTS from './Constants';
import * as GL from './GL';
import Program from './Program';
import UniformBuffers from './UniformBuffers';

let gl: WebGL2RenderingContext | WebGLRenderingContext;
const normalMatrix: mat3 = mat3.create();
const inversedModelViewMatrix: mat4 = mat4.create();

interface Options {
  name?: string;
  type?: string;
  uniforms?: any;
  fov?: number;
  hookVertexPre?: string;
  hookVertexMain?: string;
  hookVertexEnd?: string;
  hookFragmentPre?: string;
  hookFragmentMain?: string;
  hookFragmentEnd?: string;
  vertexShader?: string;
  fragmentShader?: string;

 /**
  * Projection Matrix 
  * 
  * @readonly
  * @type {GLM.IArray}
  */
 public get Projection(): GLM.IArray {
     return mat3.clone(this.mProjection);
 }

    /**
     * recalculate {mViewWorld} matrix
     * 
     * @protected
     * @param {GLM.IArray} view
     */
    protected updateViewWorld(view: GLM.IArray) {
        mat3.multiply(this.mViewWorld, view, this.Transformations);

    }

 /*    public set Scale(scale) {
         this.mIsTransformationDirty = true;
 
     }*/
 /**
  * resets transformation matrix to identity matrix 
  */
 public reset() {
     mat3.identity(this.mTransformation);
     this.mVersion++;
 }

 /**
  * clipPos = clipFromSquare * squareFromMap * verticalFlip * mapPos
  */
 private recalculate(){
   mat3.fromMat2d(this.mapToViewportMatrix, this.verticalFlipMatrix);
   mul2d(this.mapToViewportMatrix, this.squareFromMapMatrix, this.mapToViewportMatrix);
   mul2d(this.mapToViewportMatrix, this.clipFromSquareMatrix, this.mapToViewportMatrix);
 }