class App {
  static get RENDERER_SETTING() {
    return {
      clearColor: 0x000000,
      width: window.innerWidth,
      height: window.innerHeight,
    };
  }

  //マテリアルセッティング
  static get MATERIAL_SETTING() {
    return {
      color: 0xffffff,
    };
  }

  //コンストラクタ
  constructor() {
    this.renderer;
    this.scene;
    this.camera;
    this.geometory;
    this.material;
    this.mesh;

    this.loader;
    this.texture;

    this.raycaster;

    this.width = window.innerWidth;
    this.height = window.innerHeight;

    this.render = this.render.bind(this);
  }

  _setRenderer() {
    this.renderer = new THREE.WebGLRenderer();
    this.renderer.setClearColor(new THREE.Color(App.RENDERER_SETTING.clearColor));
    this.renderer.setSize(App.RENDERER_SETTING.width, App.RENDERER_SETTING.height);
    const canvas = document.querySelector("#webgl");
    canvas.appendChild(this.renderer.domElement);
  }

  _setScene() {
    this.scene = new THREE.Scene();
  }

  _setCamera() {
    this.camera = new THREE.PerspectiveCamera((2 * Math.atan(this.height / 2 / 100) * 180) / Math.PI, this.width / this.height, 1, 1000);
    this.camera.position.set(0, 0, 100);
    this.camera.updateProjectionMatrix();
  }

  _setMesh() {
    this.loader = new THREE.TextureLoader();
    this.texture = this.loader.load("https://images.unsplash.com/photo-1518705130527-a85ab6d25e6f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80");
    const uniforms = {
      uTime: { value: 0.0 },
      uMouseX: { value: 0.0 },
      uMouseY: { value: 0.0 },
      uTexture: { value: this.texture },
      uImageAspect: { value: 1920 / 1280 },
      uPlaneAspect: { value: 800 / 500 },
    };
    this.geometory = new THREE.PlaneBufferGeometry(800, 500, 100, 100);
    this.material = new THREE.ShaderMaterial({
      uniforms,
      vertexShader: `
      varying vec2 vUv;
      uniform float uTime;
      uniform float uMouseX;
      uniform float uMouseY;

      float PI = 3.141592;
      void main(){
        vUv = uv;
        vec3 pos = position;
        float offset = 0.01;
        float freq = 0.5;
        float amp = 20.0;
        pos.x = pos.x + sin(pos.y * offset + uMouseX * freq * PI ) * amp;
        pos.y = pos.y + sin(pos.x * offset + uMouseY * freq * PI ) * amp;

        gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
      }
      `,
      fragmentShader: `
      varying vec2 vUv;
      uniform sampler2D uTexture;
      uniform float uImageAspect;
      uniform float uPlaneAspect;

      void main(){

        vec2 ratio = vec2(
        min(uPlaneAspect / uImageAspect, 1.0),
        min((1.0 / uPlaneAspect) / (1.0 / uImageAspect), 1.0)
      );

      vec2 fixedUv = vec2(
        (vUv.x - 0.5) * ratio.x + 0.5,
        (vUv.y - 0.5) * ratio.y + 0.5
      );

      vec3 texture = texture2D(uTexture, fixedUv).rgb;
      gl_FragColor = vec4(texture, 1.0);
    }
      `,
    });
    this.mesh = new THREE.Mesh(this.geometory, this.material);
    this.scene.add(this.mesh);
  }

  _setRaycaster() {
    this.raycaster = new THREE.Raycaster();
    window.addEventListener("mousemove", (event) => {
      const mouse = new THREE.Vector2();
      //スクリーン空間の座標系をレイキャスター用に正規化(-1.0 〜 1.0の範囲にする)
      mouse.x = (event.clientX / window.innerWidth) * 2.0 - 1.0;
      mouse.y = (event.clientY / window.innerHeight) * 2.0 - 1.0;

      this.raycaster.setFromCamera(mouse, this.camera);
      const intersects = this.raycaster.intersectObject(this.mesh);
      if (intersects.length > 0) {
        this.mesh.material.uniforms.uMouseX.value = mouse.x;
        this.mesh.material.uniforms.uMouseY.value = mouse.y;
      }
    });
  }

  init() {
    this._setRenderer();
    this._setScene();
    this._setCamera();
    this._setMesh();
    this._setRaycaster();
  }
  render() {
    requestAnimationFrame(this.render);
    this.renderer.render(this.scene, this.camera);
  }
}

window.addEventListener("DOMContentLoaded", () => {
  const app = new App();
  app.init();
  app.render();
});