const animate = setup()

requestAnimationFrame(function loop (t) {
  requestAnimationFrame(loop)
  
  animate(t)
})

// ==============================================================================

function setup () {
  setupWebGl()
  
  const shaderProgram = setupProgram()

  const vertices = [
    { position: [280, 200], color: [1.0, 1.0, 1.0] },
    { position: [360, 200], color: [1.0, 0.0, 0.0] },
    { position: [280, 280], color: [0.0, 0.0, 0.0] },
    { position: [360, 280], color: [0.0, 0.0, 0.0] },
  ]

  const element = createSquareElement()

  set2fUniform(shaderProgram, 'screen_size', [640, 480])

  const position = createAttribute(shaderProgram, 'position', vertices)
  const color = createAttribute(shaderProgram, 'color', vertices)
  
  const animate = (t) => {
    const dy = 120 * Math.cos(t / 3e2)

    position.values[0] = [280, 200 + dy]
    position.values[1] = [360, 200 + dy]
    position.values[2] = [280, 280 + dy]
    position.values[3] = [360, 280 + dy]

    position.refresh()

    drawElement(element)
  }
  
  return animate
}

// ==============================================================================

function setupWebGl () {
  const canvas = document.querySelector('canvas')
  window.gl = canvas.getContext('webgl')
  if (window.gl == null) throw 'WebGL not Supported'
  return window.gl
}

// ==============================================================================

function createSquareElement () {
  const indices = [
    0, 1, 2,
    1, 2, 3,
  ]

  return createElement(indices)
}

function createElement (indices) {
  return {
    length: indices.length,
    indexBuffer: createIndicesBuffer(indices),
  }
}

function drawElement (element) {
  gl.drawElements(gl.TRIANGLES, element.length, gl.UNSIGNED_SHORT, element.indexBuffer)
}

// ==============================================================================

function createIndicesBuffer (indices) {
  const buffer = gl.createBuffer()
  
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffer)
  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW)
  
  return buffer
}

function set2fUniform (program, uniformName, values) {
  const uniformLocation = gl.getUniformLocation(program, uniformName)
  gl.uniform2f(uniformLocation, ...values)
}

function createAttribute (program, name, vertices) {
  const values = vertices.map(vertex => vertex[name])
  const size = values[0].length
  
  const attribute = {
    values,
    buffer: createAttributeBuffer(program, name, size),
    refresh () {  injectDataInto(this.buffer, this.values.flat()) }
  }
  
  attribute.refresh()
  return attribute
}

function createAttributeBuffer (program, attributeName, attributeSize) {
  const buffer = gl.createBuffer()
  const attributeLocation = gl.getAttribLocation(program, attributeName)
  
  gl.enableVertexAttribArray(attributeLocation)
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
  gl.vertexAttribPointer(
    attributeLocation,
    attributeSize, // Size
    gl.FLOAT,      // Type
    false,         // Normalize
    0,             // Stride
    0,             // Offset
  )
  
  return buffer
}

function injectDataInto (buffer, data) {
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW)
}

// ==============================================================================

function setupProgram () {
  const vertexSource = `
    uniform vec2 screen_size;
    attribute vec2 position;
    attribute vec3 color;

    varying vec3 blend_color;

    void main () {
      vec2 coord = 2.0 * (position / screen_size) - 1.0;
      gl_Position = vec4(coord.xy, 1, 1);

      blend_color = color;
    }
  `
  const fragmentSource = `
    precision mediump float;

    varying vec3 blend_color;

    void main () {
      gl_FragColor = vec4(blend_color.rgb, 1); // Red
    }
  `
  
  return compileShaders(vertexSource, fragmentSource)
}

// ==============================================================================

function makeShader (type, source) {
  const shader = gl.createShader(type)
  gl.shaderSource(shader, source)
  gl.compileShader(shader)
  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    gl.deleteShader(shader)
    console.warn(source)
    throw 'Shader is Invalid'
  }
  return shader
}

function makeProgram (vertexShader, fragmentShader) {
  const program = gl.createProgram()
  gl.attachShader(program, vertexShader)
  gl.attachShader(program, fragmentShader)
  gl.linkProgram(program)
  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
    console.warn(gl.getProgramInfoLog(program))
    throw 'Unable to link Program'
  }
  return program
}

function compileShaders (vertexSource, fragmentSource) {
  const vertexShader = makeShader(gl.VERTEX_SHADER, vertexSource)
  const fragmentShader = makeShader(gl.FRAGMENT_SHADER, fragmentSource)
  const program = makeProgram(vertexShader, fragmentShader)
  gl.useProgram(program)
  return program
}