/**
 * 一个用于 webgl 加载tin数据的 处理类
 * @wrriten {wangxu} on 2022/3/25
 */
import Matrix4 from "./cuon-matrix.js";
// 调试工具
// var SPECTOR = require("spectorjs");
// var spector = new SPECTOR.Spector();
// spector.displayUI();
class WebGLRenderer {
  constructor(options) {
    this.init(options);
  }

  /**
   * 初始化内容
   */
  init(options) {
    // 生成 可以被 截图的 canvas
    let mapDom = document.getElementById(options.mapID);
    let canvas = document.createElement("canvas", {
      preserveDrawingBuffer: true,
    });
    canvas.width = mapDom.clientWidth;
    canvas.height = mapDom.clientHeight;

    this.gl = canvas.getContext("webgl");
    this.canvas = canvas;
    this.tindata = options.tindata;
    this.program = this.gl.createProgram();
    this.__origin__resolution = options.originResolution;
    this.colormaker = options.colormaker;

    this.initShader(this.gl, this.program);

    this.linkShaderToProgram(this.gl, this.program);

    let count = this.initBufferData(this.gl, this.program);
    this.count = count;

    this.initModelMatrix(this.gl, this.program);

    this.renderElement(this.gl, this.count);

    console.log(this.canvas.toDataURL());
  }

  /**
   * 绘制图像
   */
  renderElement(gl, count) {
    gl.clearColor(0.0, 0.0, 0.0, 0.0);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    var ext = gl.getExtension("OES_element_index_uint");
    gl.drawElements(gl.TRIANGLES, count, gl.UNSIGNED_INT, 0);
  }

  changeMatrix(frameState) {
    let { gl, program } = this;
    var calcMatrix = new Matrix4();
    let ratio = (
      this.__origin__resolution / frameState.viewState.resolution
    ).toFixed(2);
    let center = frameState.viewState.center;
    let extent = frameState.extent;
    let originDiff = (extent[2] - extent[0]) / 360.0;
    calcMatrix.scale(1 / originDiff, ratio, 1);
    calcMatrix.translate(-(center[0] / 180.0), -(center[1] / 90.0), 0);
    // calcMatrix.translate(-0.5 * 10,-0.5 * 10,0)
    var u_modelMatrix = gl.getUniformLocation(program, "u_modelMatrix");
    gl.uniformMatrix4fv(u_modelMatrix, false, calcMatrix.elements);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    gl.drawElements(gl.TRIANGLES, this.count, gl.UNSIGNED_INT, 0);
  }

  /**
   * 将shader 链接到 program
   */
  linkShaderToProgram(gl, program) {
    gl.linkProgram(program);
    gl.useProgram(program);
  }

  /**
   * 初始化 模型矩阵
   */
  initModelMatrix(gl, program) {
    let modelMatrix = new Matrix4();
    modelMatrix.scale(1, 1, 1);
    // 缓冲区重 存储 modelMatrix的索引位置
    let modelMatrixIndex = gl.getUniformLocation(program, "u_modelMatrix");
    // 往着色器中赋值
    gl.uniformMatrix4fv(modelMatrixIndex, false, modelMatrix.elements);
  }

  /**
   * 装载着色器
   */
  initShader(gl, program) {
    var vertexShaderSource =
      "attribute vec4 position;\n" +
      "attribute vec4 color;\n" +
      "uniform mat4 u_modelMatrix;\n" +
      "varying vec4 v_Color;\n" +
      "void main() {\n" +
      "v_Color = color;\n" +
      "gl_Position = u_modelMatrix * position;\n" +
      "}\n";
    var fragmentShaderSource =
      "#ifdef GL_ES\n" +
      "precision mediump float;\n" +
      "#endif\n" +
      "varying vec4 v_Color;\n" +
      "void main(){\n" +
      "   gl_FragColor = v_Color;\n" +
      "}\n";

    //从上面例子使用 createShader 函数。
    var vertexShader = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vertexShader, vertexShaderSource);
    gl.compileShader(vertexShader);
    //从上面例子使用 createShader 函数。
    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(fragmentShader, fragmentShaderSource);
    // 编译此 着色器
    gl.compileShader(fragmentShader);

    // 绑定预先存在的着色器 至program
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);

    // 调试代码,alert的内容为ERROR: 0:2:" :No precision specified for (float)
    if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
      alert(gl.getShaderInfoLog(fragmentShader));
    }
    // 调试代码,alert的内容为ERROR: 0:2:" :No precision specified for (float)
    if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
      alert(gl.getShaderInfoLog(vertexShader));
    }
  }

  /**
   * 初始化 缓冲数据
   * @param {*} gl
   * @param {*} program
   * @returns n 绘制的顶点个数
   */
  initBufferData(gl, program) {
    let dataLen = this.tindata.data.length;
    let data = this.tindata.data;
    let vertexPositions = [];
    let colors = [];
    for (let i = 0; i < dataLen; i++) {
      vertexPositions.push(data[i][0] / 180.0, data[i][1] / 90.0);
      colors.push(
        ...this.colormaker.makeColor(data[i][2]).map((e) => e / 255.0),
        1.0
      );
    }
    let indices = this.tindata.indices;
    var vertices = new Float32Array(vertexPositions);
    var n = indices.length; //点的个数

    //创建缓冲区对象
    var vertexBuffer = gl.createBuffer();
    if (!vertexBuffer) {
      console.log("Failed to create the buffer object");
      return -1;
    }
    //将缓冲区对象绑定到目标
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    //向缓冲区写入数据
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
    //获取坐标点
    var a_Position = gl.getAttribLocation(program, "position");
    //将缓冲区对象分配给a_Position变量
    gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
    //连接a_Position变量与分配给它的缓冲区对象
    gl.enableVertexAttribArray(a_Position);

    // ------------------------------------
    var colorBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
    //获取顶点颜色苏哦因
    var __color = gl.getAttribLocation(program, "color");
    console.log(__color);
    //将缓冲区对象分配给a_Position变量
    gl.vertexAttribPointer(__color, 4, gl.FLOAT, false, 0, 0);
    //连接a_Position变量与分配给它的缓冲区对象
    gl.enableVertexAttribArray(__color);

    // -------------------------------------

    var indexBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
    gl.bufferData(
      gl.ELEMENT_ARRAY_BUFFER,
      new Uint32Array(indices),
      gl.STATIC_DRAW
    );
    return n;
  }
}

export default WebGLRenderer;