import { AfterViewInit, Component, ElementRef, OnInit, ViewChild, ɵɵclassMapInterpolate4 } from '@angular/core';
import {mat2, mat4} from 'gl-matrix';

@Component({
  selector: 'app-play',
  template: `
  <canvas #canvas ></canvas>
  `,
  styles: [
    `
:host{
  display:block;
}
canvas{
  position : fixed;
  left:0; 
  top:0;
  width:100vw;
  height:100vh;
  background-color:#ccc;
}

    `
  ]
})
export class PlayComponent implements OnInit, AfterViewInit {
  @ViewChild('canvas') canvasRef: ElementRef;
  gl: WebGLRenderingContext;
  canvas: HTMLCanvasElement;


  constructor() { }

  ngOnInit(): void { }
  ngAfterViewInit() {
    this.canvas = this.canvasRef.nativeElement as HTMLCanvasElement;
    this.gl = this.canvas.getContext('webgl');
    console.log('gl', this.gl);
    this.play();
  }


  play() {
    let gl = this.gl;

    // Set clear color to black, fully opaque
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    // Clear the color buffer with specified clear color
    gl.clear(gl.COLOR_BUFFER_BIT);
  }


  initBuffers(gl: WebGLRenderingContext) {
    const positionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
    const positions = [
      1.0, 1.0,
      -1.0, 1.0,
      1.0, -1.0,
      -1.0, -1.0
    ];
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

    return {
      position: positionBuffer,
    }

  }

  drawScene(gl : WebGLRenderingContext) {
    
    
  } 


  drawSqurePlane(gl: WebGLRenderingContext) {
    let vsSource = `
      attribute vec4 aVertexPosition;
      uniform mat4 uModelViewMatrix;
      uniform mat4 uProjectionMatrix;

      void main() {
        gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
      }
    `;

    let fsSource = `
      void main() {
        gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
      }
    `;

    const shaderProgram: WebGLProgram = this.initShaderProgram(gl, vsSource, fsSource);

    const programInfo = {
      programe: shaderProgram,
      attribLocations: {
        vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
      },
      uniformLocations: {
        projectionMatrix: gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'),
        modelViewMatrix: gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'),
      }
    }

  }




  initShaderProgram(gl: WebGLRenderingContext, vsSource: string, fsSource: string): WebGLProgram {
    const vertexShader = this.loadShader(gl, gl.VERTEX_SHADER, vsSource);
    const fragmentShader = this.loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
    //create shader program 
    const shaderProgram: WebGLProgram = gl.createProgram();
    gl.attachShader(shaderProgram, vertexShader);
    gl.attachShader(shaderProgram, fragmentShader);
    gl.linkProgram(shaderProgram);

    let linkStatus = gl.getProgramParameter(shaderProgram, gl.LINK_STATUS);
    if (!linkStatus) {
      console.error('link shader program failed.', gl.getProgramInfoLog(shaderProgram));
      return null;
    }
    return shaderProgram;
  }

  loadShader(gl: WebGLRenderingContext, type: number, source: string): WebGLShader {
    const shader: WebGLShader = gl.createShader(type);
    gl.shaderSource(shader, source);
    gl.compileShader(shader);
    let status = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
    if (!status) {
      console.error('shader compile failed.', gl.getShaderInfoLog(shader));
      gl.deleteShader(shader);
      return null;
    }
    return shader;
  }

}
