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")
  }
}