/**
* References.
https://ics.media/entry/5535/
*/

import { Renderer, Camera, Transform, Program, Texture, Geometry, Mesh, Vec2, Plane } from "https://cdn.skypack.dev/ogl@0.0.73";
import {Pane} from "https://cdn.skypack.dev/tweakpane@3.0.5";

/**
* set tweakpane
*/
const PARAMS = {
  fMosaicScale: 0.01,
};

const pane = new Pane();

pane.addInput(PARAMS, 'fMosaicScale', {
  min: 0.01, max: 100.0,
});

/**
* set
*/
let textures = []
const time = { value: 1.0 };
const aspect = 1;
let lastTime = false;
const renderer = new Renderer({ 
  dpr: 2,
  antialias: true,
  alpha: true
});
const gl = renderer.gl;
document.body.appendChild(gl.canvas);
const camera = new Camera(gl);
camera.position.z = 600;
camera.perspective({ 
  near: 0.001, 
  far: 1000,
  aspect: gl.canvas.width / gl.canvas.height,
  fov: 2 * Math.atan( (window.innerHeight/2)/600 ) * 180/Math.PI
})
const scene = new Transform();
let program = null;
let plane = null;
let progress = 0.0;

createOglPlane();

window.addEventListener("resize", resize, false)

resize()

function createOglPlane() {
  const vertex = `  
    attribute vec2 uv;
    attribute vec3 position;
    varying vec2 vUv;
    
    uniform mat4 modelViewMatrix;
    uniform mat4 projectionMatrix;
    uniform float time;
    
    void main() {
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `;
  const fragment = `
    precision highp float;
     
		uniform float progress;
		varying vec2 vUv;
    
    uniform sampler2D texture1;
		// uniform sampler2D texture2;
		// uniform sampler2D cloudTexture;
    
    uniform vec2 resolution;
    uniform vec2 imageSize;

    uniform float fMosaicScale;
    
    void main() {
      vec2 vUv2 = vUv;
      vUv2.x = floor(vUv2.x * imageSize.x / fMosaicScale) / (imageSize.x / fMosaicScale) + (fMosaicScale / 2.0) / imageSize.x;
      vUv2.y = floor(vUv2.y * imageSize.y / fMosaicScale) / (imageSize.y / fMosaicScale) + (fMosaicScale / 2.0) / imageSize.y;

      vec4 color = texture2D(texture1, vUv2);
      gl_FragColor = color;
    }
  `;

  // gl.clearColor(255, 255, 255, 1)
  
  const geometry = new Plane(gl, {
    width: 960, 
    height: 640, 
    // width: window.innerWidth, 
    // height: window.innerHeight, 
    widthSegments: 100, 
    heightSegments: 100, 
  })
  
  const imgSrcs = [
    'https://assets.codepen.io/256691/1.webp',//https://assets.codepen.io/256691/1.webp
    'https://assets.codepen.io/256691/4.webp',
    'https://assets.codepen.io/256691/cloud_texture.jpg',
    'https://dl.dropbox.com/s/cg2j4s99150ex09/glsl_test_tex2.jpg?dl=0'
  ]
  
  imgSrcs.forEach((e, i)=> {
    // Upload empty texture while source loading
    textures[i] = new Texture(gl);

    // update image value with source once loaded
    const img = new Image();
    img.src = e;
    img.crossOrigin = "anonymous";
    img.onload = () => (textures[i].image = img);
  })
  
  program = new Program(gl, {
    vertex,
    fragment,
    uniforms: {
      resolution: { value: new Vec2(window.innerWidth, window.innerHeight) },
      imageSize: { value: new Vec2(960, 640) },
      time: time,
      fMosaicScale: { value: 0.01 },
      texture1: { value: textures[0] },
      // texture2: { value: textures[1] },
      // cloudTexture: { value: textures[2] }
    },
    cullFace: null
  });
  plane = new Mesh(gl, { geometry: geometry, program: program });
  plane.setParent(scene);
  
  renderer.render({ scene, camera });
  // renderer.render({ scene: plane, webgl: 1 });
  requestAnimationFrame(update);
}

function update(t) {
  program.needsUpdate = true;
  // program.uniforms.progress.value = PARAMS.progress
  program.uniforms.fMosaicScale.value = PARAMS.fMosaicScale
  
  // plane.rotation.x += 0.001
  // plane.rotation.y += 0.002
  
  requestAnimationFrame(update);
  renderer.render({ scene, camera });
}

function resize() {
  const width = gl.canvas.offsetWidth;
  const height = gl.canvas.offsetHeight;
  
  // camera.perspective({ aspect: window.innerWidth / window.innerHeight });
  camera.perspective({ aspect: width / height });
  renderer.setSize(width, height);
  
  // image cover
  let imageAspect = textures[0].height / textures[0].width;
  let a1; 
  let a2;
  if( height / width > imageAspect ) {
    a1 = ( width / height ) * imageAspect;
    a2 = 1;
  } else{
    a1 = 1;
    a2 = ( height / width ) / imageAspect;
  }
  // console.log(gl.canvas)
  // plane.scale.x = width
  // plane.scale.y = height
  // plane.scale.x = camera.aspect
  // plane.scale.y = 1
  
  if (program && program.uniforms) {
    program.needsUpdate = true;
    program.uniforms.resolution.value = new Vec2(
      width,
      height,
      // a1,
      // a2
    );
  }
}