function Texture(gl) {
  this.gl = gl
  this.texture = gl.createTexture()
  gl.bindTexture(gl.TEXTURE_2D, this.texture)

  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR)
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR)

  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
}

Texture.prototype.bind = function(n, program, name) {
  var gl = this.gl
  gl.activeTexture([gl.TEXTURE0, gl.TEXTURE1, gl.TEXTURE2][n])
  gl.bindTexture(gl.TEXTURE_2D, this.texture)
  gl.uniform1i(gl.getUniformLocation(program, name), n)
}

Texture.prototype.fill = function(width, height, data) {
  var gl = this.gl
  gl.bindTexture(gl.TEXTURE_2D, this.texture)
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.LUMINANCE, width, height, 0, gl.LUMINANCE, gl.UNSIGNED_BYTE, data)
}

export function WebGLPlayer(canvas) {
  this.canvas = canvas
  this.gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl")
  this.initGL()
}

WebGLPlayer.prototype.initGL = function() {
  if (!this.gl) {
    console.log("[ER] WebGL not supported.")
    return
  }

  var gl = this.gl
  gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1)
  var program = gl.createProgram()
  var vertexShaderSource = [
    "attribute highp vec4 aVertexPosition;",
    "attribute vec2 aTextureCoord;",
    "varying highp vec2 vTextureCoord;",
    "void main(void) {",
    " gl_Position = aVertexPosition;",
    " vTextureCoord = aTextureCoord;",
    "}"
  ].join("\n")
  var vertexShader = gl.createShader(gl.VERTEX_SHADER)
  gl.shaderSource(vertexShader, vertexShaderSource)
  gl.compileShader(vertexShader)
  var fragmentShaderSource = [
    "precision highp float;",
    "varying lowp vec2 vTextureCoord;",
    "uniform sampler2D YTexture;",
    "uniform sampler2D UTexture;",
    "uniform sampler2D VTexture;",
    "const mat4 YUV2RGB = mat4",
    "(",
    " 1.1643828125, 0, 1.59602734375, -.87078515625,",
    " 1.1643828125, -.39176171875, -.81296875, .52959375,",
    " 1.1643828125, 2.017234375, 0, -1.081390625,",
    " 0, 0, 0, 1",
    ");",
    "void main(void) {",
    " gl_FragColor = vec4( texture2D(YTexture, vTextureCoord).x, texture2D(UTexture, vTextureCoord).x, texture2D(VTexture, vTextureCoord).x, 1) * YUV2RGB;",
    "}"
  ].join("\n")

  var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)
  gl.shaderSource(fragmentShader, fragmentShaderSource)
  gl.compileShader(fragmentShader)
  gl.attachShader(program, vertexShader)
  gl.attachShader(program, fragmentShader)
  gl.linkProgram(program)
  gl.useProgram(program)
  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
    console.log("[ER] Shader link failed.")
  }
  var vertexPositionAttribute = gl.getAttribLocation(program, "aVertexPosition")
  gl.enableVertexAttribArray(vertexPositionAttribute)
  var textureCoordAttribute = gl.getAttribLocation(program, "aTextureCoord")
  gl.enableVertexAttribArray(textureCoordAttribute)

  var verticesBuffer = gl.createBuffer()
  gl.bindBuffer(gl.ARRAY_BUFFER, verticesBuffer)
  gl.bufferData(
    gl.ARRAY_BUFFER,
    new Float32Array([1.0, 1.0, 0.0, -1.0, 1.0, 0.0, 1.0, -1.0, 0.0, -1.0, -1.0, 0.0]),
    gl.STATIC_DRAW
  )
  gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0)
  var texCoordBuffer = gl.createBuffer()
  gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer)
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([1.0, 0.0, 0.0, 0.0, 1.0, 1.0, 0.0, 1.0]), gl.STATIC_DRAW)
  gl.vertexAttribPointer(textureCoordAttribute, 2, gl.FLOAT, false, 0, 0)

  gl.y = new Texture(gl)
  gl.u = new Texture(gl)
  gl.v = new Texture(gl)
  gl.y.bind(0, program, "YTexture")
  gl.u.bind(1, program, "UTexture")
  gl.v.bind(2, program, "VTexture")
}

WebGLPlayer.prototype.renderFrame = function(videoFrame, width, height) {
  if (!this.gl) {
    console.log("[ER] Render frame failed due to WebGL not supported.")
    return
  }

  var gl = this.gl
  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height)
  gl.clearColor(0.0, 0.0, 0.0, 0.0)
  gl.clear(gl.COLOR_BUFFER_BIT)

  gl.y.fill(width, height, videoFrame.subarray(0, width * height))
  gl.u.fill(width >> 1, height >> 1, videoFrame.subarray(width * height, (width * height * 5) / 4))
  gl.v.fill(width >> 1, height >> 1, videoFrame.subarray((width * height * 5) / 4, (width * height * 3) / 2))

  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)
}

WebGLPlayer.prototype.fullscreen = function() {
  let canvas = this.canvas.parentNode.parentNode.parentNode
  if (canvas.RequestFullScreen) {
    canvas.RequestFullScreen()
  } else if (canvas.webkitRequestFullScreen) {
    canvas.webkitRequestFullScreen()
  } else if (canvas.mozRequestFullScreen) {
    canvas.mozRequestFullScreen()
  } else if (canvas.msRequestFullscreen) {
    canvas.msRequestFullscreen()
  } else {
    alert("This browser doesn't supporter fullscreen")
  }
}

WebGLPlayer.prototype.exitfullscreen = function() {
  if (document.exitFullscreen) {
    document.exitFullscreen()
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen()
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen()
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen()
  } else {
    alert("Exit fullscreen doesn't work")
  }
}