import * as THREE from "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js";

import { OrbitControls } from "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/controls/OrbitControls.js";
// Class for the experiment
class GettingStarted {
  
  //Starting the composition ( only called once at the start ) ///////////////////////////////////////
  start(){
    
    // RENDERER //////////////////////////////////////////////////
    //Setting 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 /////////////////////////////////////////////////
    //Creating an empty scene
    this.scene = new THREE.Scene();

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


    // Setting camera positon
    this.camera.position.set( 0, 0, 50 );
    this.scene.add(this.camera);

    // LIGHTS /////////////////////////////////////////////////
    //Ambient lighting added here
    const ambientLight = new THREE.AmbientLightProbe(0xffffff, 0.5);
    this.scene.add(ambientLight);
    
    const dirLight = new THREE.DirectionalLight(0xffffff, 1);
    dirLight.position.set(1,0,0);
    this.scene.add(dirLight);
    
    // BUILDING THE COMPOSITION //////////////////////////////////////////////   
    // Set up nested circle parameters
    this.numberOfCubesPerCircle = 30;
    this.startRadius = 20;
    this.endRadius = 5;
    this.currentCircleRadius = 0;

    // Define depth in the Z-axis, number of circles and space between each circle
    this.totalDepthInZAxis = 40;
    this.numberOfCircles = 5;
    this.spaceBetweenCircles = this.totalDepthInZAxis / (this.numberOfCircles - 1);

    // Creating cube geometry and material
    const cubeGeometry = new THREE.BoxGeometry( 2, 2, 2 );
    const cubeMaterial = new THREE.MeshStandardMaterial( { color: 0xffffff } );
    
    // Loop through each nested circle 
    for (let currentCircleIndex = 0; currentCircleIndex < this.numberOfCircles; currentCircleIndex++) {

      // Compute the Z position for each circle
      let zPosition = -(currentCircleIndex * this.spaceBetweenCircles);

      // Loop through each cube in the current circle
      for (let currentCubeIndex = 0; currentCubeIndex < this.numberOfCubesPerCircle; currentCubeIndex++) {
        let cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
        this.scene.add(cube);
        
        // Set cube's Z position
        cube.position.z = zPosition;

        // Calculate the progress of each cube within a circle and each circle within the pattern
        let cubeProgressWithinCircle = currentCubeIndex / this.numberOfCubesPerCircle;
        let circleProgressWithinPattern = currentCircleIndex / this.numberOfCircles; 

        // Calculate the angle in radians and update the current circle radius based on the circle's progress
        let cubeAngleInRadians = (Math.PI * 2) * cubeProgressWithinCircle;       
        this.currentCircleRadius = this.startRadius + (this.endRadius - this.startRadius) * circleProgressWithinPattern;

        
        // Calculate the cube's X position by multiplying each circle's radius with the cosine of the angle. Alternatively, use the sine of the angle for calculating the Y position instead. Set cube's X & Y positions
        cube.position.x = Math.cos(cubeAngleInRadians) * this.currentCircleRadius;
        cube.position.y = Math.sin(cubeAngleInRadians) * this.currentCircleRadius;
      }
    }

  }
  
  // Updating the composition ( called every frame, 60fps) put animation / interaction here //////////////////////////////////////////
  update(dt){
    this.renderer.render(this.scene, this.camera);
  }
  
} // End of the class

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

// 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 );