import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.127.0/build/three.module.js";

import { OrbitControls } from "https://cdn.jsdelivr.net/npm/three@0.127.0/examples/jsm/controls/OrbitControls.js";
// Class for the experiment
class TurningSticks {
  constructor(){
     // RENDERER //////////////////////////////////////////////////
    //Set up the renderer
    this.renderer = new THREE.WebGLRenderer({canvas: document.querySelector('#bg')});
    this.renderer.setPixelRatio(window.devicePixelRatio);
    this.renderer.setSize(window.innerWidth, window.innerHeight);

    // SCENE /////////////////////////////////////////////////
    //Create an empty scene
    this.scene = new THREE.Scene();

    // CAMERA ////////////////////////////////////////////////
    // Create camera
    this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
    
    // CTRL /////////////////////////////////////////////////
    const controls = new OrbitControls(this.camera, this.renderer.domElement);

    // Position camera
    this.camera.position.set( 0, 0, 10 );
    this.scene.add(this.camera);

    // LIGHTS /////////////////////////////////////////////////
     // Set up ambient lighting
    const ambientLight = new THREE.AmbientLightProbe(0xffffff, 0.5);
    this.scene.add(ambientLight);
    
    // Set up directional light
    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    directionalLight.position.set(1,0,0);
    this.scene.add(directionalLight);
    
  }

  start(){ 
    // BUILDING THE COMPOSITION //////////////////////////////////////////////
    // Set up geometry for all cylinders
    const mainCylinderGeom = new THREE.CylinderGeometry( 0.5, 0.5, 6 );
    const upperCylinderGeom = new THREE.CylinderGeometry( 0.5, 0.5, 4 );
    const lowerCylinderGeom = new THREE.CylinderGeometry( 0.5, 0.5, 4 );
    // Set up a common material for all cylinders
    const cylinderMaterial = new THREE.MeshStandardMaterial( {
        color: 0xffffff
    } );
    
    // Create main cylinder
    this.mainCylinder = new THREE.Mesh( mainCylinderGeom, cylinderMaterial );
    // Add main cylinder to the scene
    this.scene.add( this.mainCylinder );
    
    // Create upper cylinder 
    this.upperCylinder = new THREE.Mesh( upperCylinderGeom, cylinderMaterial );
    // Rotate upper cylinder horizontally
    this.upperCylinder.rotateZ(Math.PI / 2);
    // Position upper cylinder at the top of the main cylinder 
    this.upperCylinder.position.y = 3;
    // Add upper cylinder as a child of the main cylinder
    this.mainCylinder.add(this.upperCylinder)
    
    // Create lower cylinder
    this.lowerCylinder = new THREE.Mesh( lowerCylinderGeom, cylinderMaterial );
    // Rotate lower cylinder horizontally 
    this.lowerCylinder.rotateZ(Math.PI / 2);
    // Position lower cylinder at the base of the main cylinder 
    this.lowerCylinder.position.y = -3;
    // Add lower cylinder as a child of the main cylinder
    this.mainCylinder.add(this.lowerCylinder)
    
    // Initialise time variable
    this.time = 0;
  }
  
  // Updating the composition ( called every frame, 60fps) put animation / interaction here 
  // dt - time elapsed since last call to update function, in seconds. Should be close to 0.016 if the rendering is at 60FPS
  //////////////////////////////////////////
  update(dt){
    // Increase time variable by dt
    this.time += dt;
    // Rotate cylinders over time
    this.mainCylinder.rotation.z = this.time * 1.5;
    this.upperCylinder.rotation.y = this.time * 3;
    this.lowerCylinder.rotation.y = this.time * 10;
    this.renderer.render(this.scene, this.camera);
  }
  
} // End of the Class

// Creating the composition
let comp = new TurningSticks();

// Starting the composition
comp.start();

// Requesting animation frame and calculating time
let time=Date.now();
function animate(){
  let oldtime=time;
  time=Date.now();
  comp.update((oldtime-time)/1000);
  requestAnimationFrame(animate);
}
animate();

// Listening to window resize, and updating camera & rendere dimensions
function windowResize()
{
	var width = window.innerWidth;
	var height = window.innerHeight;
	comp.renderer.setSize( width, height );
	comp.camera.aspect = width / height;
	comp.camera.updateProjectionMatrix();
}
window.addEventListener('resize', windowResize );