import * as THREE from 'three'
import RenderPass from './RenderPass'
import ShaderPass from './ShaderPass'
import FilmPass from './FilmPass'
import TexturePass from './TexturePass'
import VignetteShader from './VignetteShader'
import SepiaShader from './SepiaShader'
import TVShader from './TVShader'
import { EffectComposer } from './EffectComposer'


export default class TVScreen {
  constructor(container, video, initialWidth, initalHeight) {
    const containerWidth = initialWidth
    const containerHeight = initalHeight
    const containerHalfWidth = initialWidth / 2
    const containerHalfHeight = initalHeight / 2
    console.log(containerWidth, containerHalfWidth, containerHeight, containerHalfHeight)
    this.antialias = false
    this.clock = new THREE.Clock()
    this.scene = new THREE.Scene()

    // initalize scene
    this.texture = this.getVideoTexture(video)
    this.renderer = this.getRenderer(this.antialias, containerWidth, containerHeight)
    this.rendererDomElement = this.renderer.domElement
    this.tvGemometry = new THREE.PlaneBufferGeometry(containerWidth, containerHeight)
    this.tvMaterial = new THREE.MeshBasicMaterial({map: this.texture})
    this.tvMesh = new THREE.Mesh(this.tvGemometry, this.tvMaterial)
    this.scene.add(this.tvMesh)

    this.camera = new THREE.OrthographicCamera(-containerHalfWidth, containerHalfWidth, containerHalfHeight, -containerHalfHeight, 1, 10000 )
    this.camera.position.z = 1
    this.camera.lookAt(this.tvMesh.position)

    // postprocessing
    const renderScene = new TexturePass(this.texture)
    const renderModel = new RenderPass(this.scene, this.camera)
    this.composer = new EffectComposer(this.renderer)
    this.effectTV = new ShaderPass(TVShader)

    renderScene.uniforms.tDiffuse.value = this.texture
    this.effectTV.uniforms.time.value = this.getTimePassed()
    this.effectTV.uniforms.resolution.value = new THREE.Vector2(containerWidth, containerHeight)
    this.effectTV.renderToScreen = true

    this.composer.addPass(renderModel)
    this.composer.addPass(renderScene)
    this.composer.addPass(this.effectTV)

    container.appendChild(this.rendererDomElement)
    this.animate()
    window.addEventListener('resize', this.onWindowResize.bind(this))
  }

  getVideoTexture(video) {
    const texture = new THREE.VideoTexture(video)

    texture.minFilter = THREE.LinearFilter
    texture.magFilter = THREE.LinearFilter
    texture.format = THREE.RGBFormat
    return texture
  }

  getRenderer(antialias, containerWidth, containerHeight) {
   const renderer = new THREE.WebGLRenderer({antialias})
   renderer.setPixelRatio(1)
   renderer.setSize(containerWidth, containerHeight)
   renderer.autoClear = false
   return renderer
  }

  getTimePassed() {
    return this.clock.getDelta()
  }

  onWindowResize() {
    const {clientWidth, clientHeight} = this.rendererDomElement
    this.camera.aspect = clientWidth / clientHeight
    this.renderer.setSize(clientWidth, clientHeight)
    this.camera.updateProjectionMatrix()
    this.composer.reset()
  }
  animate() {
    const { renderer, composer, effectTV} = this
    const getTimePassed = () => this.getTimePassed()

    ;(function animationLoop() {
      requestAnimationFrame(animationLoop)
      renderer.clear()
      composer.render()
      effectTV.uniforms.time.value += getTimePassed()
    })()
  }
}

@@ -622,98 +622,8 @@
 / 2%0A
-    console.log(containerWidth, containerHalfWidth, containerHeight, containerHalfHeight)%0A
     
@@ -2156,16 +2156,23 @@
 nd(this)
+, false
 )%0A  %7D%0A%0A 
@@ -2709,20 +2709,11 @@
   %7D%0A
-%0A
   
-onWindowR
+r
 esiz
@@ -2958,16 +2958,245 @@
 t()%0A  %7D%0A
+  onWindowResize() %7B%0A    console.log('running')%0A    const resize = this.resize.bind(this)%0A    const debounceThreshold = 250%0A%0A    clearTimeout(this.resizeTimeout)%0A    this.resizeTimeout = setTimeout(resize, debounceThreshold)%0A  %7D%0A
   animat

add debouce to resize