import { LineArt } from "../../webgl/line-art"
import { ImageLayer } from "./ImageLayer"
import { ImageShaders } from "./ImageShaders"
import { Padding, Scene } from "./Scene"
import { Triangle } from "./Triangle"
import { loadImage } from "./utils"


document.body.onload = function() {
  init()
}

async function init() {

  let canvas = document.querySelector("#canvas") as HTMLCanvasElement
  let gl = canvas.getContext('webgl2') as WebGL2RenderingContext 
  
  let scene = new Scene(gl, window.devicePixelRatio)
  
  

  scene.setContentSize(1000, 1000)
  scene.setContentPadding(new Padding(100, 100, 100, 100))
  //scene.addLayer(new Triangle(scene))
  

  let page = await loadImage('/webgl/map.png')
  //let page = await loadImage('/webgl/page.png')
  //scene.addTestLayer(new ImageLayer(scene, page, gl.LINEAR, LineArtShaders.BaseShader))
  //scene.addTestLayer(new ImageLayer(scene, page, gl.LINEAR, LineArtShaders.Avg9))
  //scene.addTestLayer(new ImageLayer(scene, page, gl.NEAREST, LineArtShaders.BicubicLagrange))
  //scene.addTestLayer(new ImageLayer(scene, page, gl.LINEAR, LineArtShaders.CommonAvg5))
  scene.addTestLayer(new ImageLayer(scene, page, gl.LINEAR, page.width, page.height,  ImageShaders.CommonGaussianBlur))
  scene.addTestLayer(new ImageLayer(scene, page, gl.LINEAR, page.width, page.height,  ImageShaders.CommonBlur))
  ///scene.addTestLayer(new ImageLayer(scene, page, gl.LINEAR))
  //scene.addTestLayer(new ImageLayer(scene, page, gl.NEAREST, LineArtShaders.BicubicHermite))
  scene.addTestLayer(new ImageLayer(scene, page, gl.NEAREST, page.width, page.height, ImageShaders.BilinearManual))
  //scene.addTestLayer(new ImageLayer(scene, page, gl.NEAREST))
  //scene.setScale(20)



  window.addEventListener('resize', () => {
    scene.updateViewport()
  })



  document.querySelector("#toggleTestLayer")?.addEventListener('click', () => scene.toggleTestLayer())
  
}