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 GridTwoD {
  
  //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, 30 );
    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.5);
    dirLight.position.set(1,1,0);
    this.scene.add(dirLight);
    
    // BUILDING THE COMPOSITION //////////////////////////////////////////////
    
    // Set the grid dimensions for each axis
    this.gridDimensionX = 10;
    this.gridDimensionY = 10;
    // Set the number of cubes along each axis
    this.numCubesX = 4;
    this.numCubesY = 4;
        
    // Calculate the space between each cube
    // This is done by dividing the total grid dimension by the number of gaps between cubes (numCubes - 1)
    this.spaceBetweenCubesX = this.gridDimensionX / (this.numCubesX - 1);
    this.spaceBetweenCubesY = this.gridDimensionY / (this.numCubesY - 1);
    
    // Create cube geometry and material
    const cubeGeometry = new THREE.BoxGeometry( 0.5, 0.5, 0.5 );
    const cubeMaterial = new THREE.MeshPhongMaterial( {
        color: 0xffffff,
        shininess: 100
    } );
    
    // Create an empty array to store cubes
    this.cubesArray = [];
    
     // Loop through the rows of the grid (along the Y-axis)
    for(let rowIndex = 0; rowIndex < this.numCubesY; rowIndex++){      
       // Inside each row, loop through the columns (along the X-axis)
      for(let colIndex = 0; colIndex < this.numCubesX; colIndex++){       
        let cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
        this.scene.add( cube );        
        
        // Calculate cube's X & Y position by multiplying the index with the space between each cube. Centre the grid of cubes by subtracting half the grid's dimension size 
        cube.position.x = colIndex * this.spaceBetweenCubesX - this.gridDimensionX / 2;
        cube.position.y = rowIndex * this.spaceBetweenCubesY - this.gridDimensionY / 2;
        this.cubesArray.push(cube);
      
      }
    }
    

  }
  
  // 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 GridTwoD();

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