let scene, camera, renderer, controls;

let forThree, forContent, scrollDiv;
let meshGroup = new THREE.Group();
const COUNT = 10;

const tweenVal = {
  scrollPx: 0,
  tilt: 0
};

class VelocityProxy {
  constructor(targets = []) {
    this.targets = targets;
    this._velocity = 0;
  }

  get velocity() {
    return this._velocity;
  }

  set velocity(value) {
    this._velocity = value;
    this.update();
  }

  addTarget(target = []) {
    if (Array.isArray(target)) {
      this.targets = [...this.targets, ...target];
    } else {
      this.targts.push(target);
    }    
    this.update();
  }
  
  update() {
    this.targets.forEach((target) => (target.rotation.z = this._velocity));
  }
}

async function init() {
  forThree = document.getElementById("forThree");
  forContent = document.getElementById("forContent");
  scrollDiv = document.getElementById("scrollDiv");

  if (!forThree) {
    return;
  }
  console.log(forThree);
  const container = document.createElement("div");
  forThree.appendChild(container);

  renderer = new THREE.WebGLRenderer({
    alpha: true
  });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setClearColor(0x00ff00, 0);
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.toneMapping = THREE.LinearToneMapping;
  container.appendChild(renderer.domElement);
  renderer.outputEncoding = THREE.sRGBEncoding;

  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(
    45,
    window.innerWidth / window.innerHeight,
    0.25,
    1000
  );
  camera.position.set(-1, 0.6, 2.7);
  loadHDRI();

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

  for (let index = 0; index < COUNT; index++) {
    const element = document.createElement("div");
    element.id = "index";
    element.innerText = String(index);

    element.style.fontSize = "100px";
    element.style.width = "100vw";
    element.style.height = "100vh";
    forContent.appendChild(element);
  }

  loadRandomSpheres();
  initGsap();
  animate();
}

function addOrbitCam() {
  // controls = new THREE.OrbitControls(camera, renderer.domElement);
}

function render() {
  renderer.render(scene, camera);
}

function animate() {
  requestAnimationFrame(animate);
  render();
}

function loadHDRI() {
  let hdri = new THREE.RGBELoader()
    .setDataType(THREE.HalfFloatType)
    .load(
      "https://threejs.org/examples/textures/equirectangular/quarry_01_1k.hdr",
      function (texture) {
        texture.mapping = THREE.EquirectangularReflectionMapping;
        const envMap = texture;
        scene.background = envMap;
        scene.environment = envMap;
      }
    );
}

function loadRandomSpheres() {
  const limit = 10;
  const spread = 20;
  for (let i = 0; i < limit; i++) {
    const geometry = new THREE.BoxGeometry(2, 0.1, 0.1);
    geometry.translate(-1, 0, 0);
    const material = new THREE.MeshStandardMaterial({ color: 0xffff00 });
    material.color.setHSL(Math.random(), 0.5, 0.5);
    const sphere = new THREE.Mesh(geometry, material);

    // sphere.position.x = Math.random() * spread - spread / 2;
    sphere.position.y = i * 0.2; // Math.random() * spread - spread / 2;
    // sphere.position.z =  Math.random() * spread - spread / 2;

    meshGroup.add(sphere);
  }

  scene.add(meshGroup);
}

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize(window.innerWidth, window.innerHeight);
}

function initGsap() {

  let proxy = new VelocityProxy(meshGroup.children);

  //set scroll div height as content div height
  scrollDiv.style.height =
    String(forContent.scrollHeight - window.innerHeight) + "px";

  gsap.registerPlugin(ScrollTrigger);

  let scrollObj = { velocity: 0 };
  let clamp = gsap.utils.clamp(-30, 30); // don't let the skew go beyond 20 degrees.

  console.log(scrollDiv, forContent);

  gsap.to(tweenVal, {
    scrollPx: scrollDiv.scrollHeight,
    onUpdate: () => {
      // meshGroup.rotation.y = THREE.MathUtils.mapLinear(tweenVal.scrollPx, 0, scrollDiv.scrollHeight, 0, 1.457 * 4)
      forContent.style.transform = `translateY(${-tweenVal.scrollPx}px)`;
    },
    scrollTrigger: {
      trigger: scrollDiv,
      start: 0,
      end: "bottom bottom",
      markers: true,
      scrub: 1,
      snap: 0.1,
      onUpdate: (self) => {
        let currentTilt = clamp(self.getVelocity() / 100);
        
        if (Math.abs(currentTilt) > Math.abs(proxy.velocity)) {
          gsap.killTweensOf(proxy);
          gsap.timeline()
            .to(proxy, {
              velocity: THREE.MathUtils.degToRad(currentTilt),
              duration: 0.5
            })
            .to(proxy, {
              velocity: 0,
              duration: 0.5
            });
        }
      }
    }
  });
}

init();