import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.121.1/build/three.module.js';
import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/three@0.121.1/examples/jsm/controls/OrbitControls.js';

const simplex = new SimplexNoise();

const getRandomNumber = function (min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
};

/** vertex shader source */
const vertexShaderSource = `
uniform float uTime;

varying vec2 vUv;

float PI = 3.14159265359;

void main(){
  vUv = uv;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

`;

/** fragment shader source */
const fragmentShaderSource = `
uniform float uTime;
uniform sampler2D texture;

varying vec2 vUv;
varying vec3 vPosition;

void main () {
  gl_FragColor = vec4(vUv, abs(sin(uTime)), 1.0);
}

`;

/**
 * class Sketch
 */
class Sketch {
  constructor() {
    /** renderer */
    this.renderer =
      new THREE.WebGLRenderer({
        antialias: true,
        alpha: true
      });
    document.getElementById('container').appendChild(this.renderer.domElement);
    
    /** 3js parameters*/
    this.stats = null;
    this.camera = null;
    this.scene = null;
    this.controls = null;
    this.light = null;
    
    /** shape */
    this.shapes = null;
    this.shapesOfNumber = null;
    
    /** etc patrameters */
    this.width = null;
    this.height = null;
    this.dist = null;
    this.time = null;
    this.mouse = null;
    this.animationId = null;
    
    /** setup */
    this.setupEvents();
    this.statsInit();
    this.init();
  }

  statsInit() {
    this.stats = new Stats();
    this.stats.setMode(0);
    this.stats.domElement.style.position = 'absolute';
    this.stats.domElement.style.left = '0';
    this.stats.domElement.style.top = '0';
    document.getElementById('container').appendChild(this.stats.domElement);
  }
  
  init() {
    /** time */
    this.time = new THREE.Clock(true);
    
    /** mouse */
    this.mouse = new THREE.Vector2();
    
    /** canvas size */
    this.width = window.innerWidth;
    this.height = window.innerHeight;

    /** scene */
    this.scene = new THREE.Scene();
    
    /** setup and render */
    this.setupCanvas();
    this.setupCamera();
    this.setupLight();
    this.setupShape();
    
    this.render();
  }
  
  setupCanvas() {
    /** renderer */
    this.renderer.setSize(this.width, this.height);
    this.renderer.setPixelRatio(window.devicePixelRatio);
    this.renderer.setClearColor(0x000000, 1.0);
    
    /** style */
    this.renderer.domElement.style.position = 'fixed';
    this.renderer.domElement.style.top = '0';
    this.renderer.domElement.style.left = '0';
    this.renderer.domElement.style.zIndex = '0';
    this.renderer.domElement.style.outline = 'none';
  }
  
  setupCamera() {
    const fov = 70;
    const fovRadian = (fov / 2) * (Math.PI / 180);
    
    this.dist = this.height / 2 / Math.tan(fovRadian);
    this.camera =
      new THREE.PerspectiveCamera(
        fov,
        this.width / this.height,
        1,
        this.dist * 2
      );
    this.camera.position.set(0, 300, this.dist);
    this.controls = new OrbitControls(this.camera, this.renderer.domElement);
  }
  
  setupLight() {
    /** directinal light */
    this.directionalLight = new THREE.DirectionalLight(0xffffff);

    /** point light*/
    this.pointLight = new THREE.PointLight(0xffffff, 2, 1000);
    this.pointLight.position.set(0, 0, this.dist);
    
    this.scene.add(this.directionalLight);
    this.scene.add(this.pointLight);
  }
  
  setupShape() {
    this.shapes = new Array();
    //this.shapesOfNumber = 100;
    for (let y = 0; y < 400; y+=20) {
      for (let x = 0; x < 400; x+=20) {
        const s = new Shape(this, x - 190, 0, y - 190);
        this.shapes.push(s);
      }
    }
  }
  
  render() {
    this.stats.begin(); // -------------------- //
    
    for (let i = 0; i < this.shapes.length; i++) {
      this.shapes[i].update(this.time.getElapsedTime());
    }
    this.renderer.render(this.scene, this.camera);
    
    this.stats.end();   // -------------------- //
    this.animationId = requestAnimationFrame(this.render.bind(this));
  }
  
  setupEvents() {
    window.addEventListener('resize', this.resize.bind(this), false);
    window.addEventListener('mousemove', this.mousemove.bind(this), false);
  }
  
  resize() {
    const id = this.animationId;
    
    cancelAnimationFrame(id);
    this.init();
  }
  
  mousemove(event) {
    this.mouse.x = event.clientX - (this.width / 2);
    this.mouse.y = - event.clientY + (this.height / 2);
  }
}

class Shape {
  constructor(sketch, x, y, z) {
    this.sketch = sketch;
    
    this.geometry = null;
    this.meterial = null;
    this.mesh = null;
    
    this.position = null;
    this.vector = null;
    this.scale = null;
    this.size = null;
    this.color = null;
    this.d = null;
    
    this.init(x, y, z);
  }
  
  init(x, y, z) {
    this.position = new THREE.Vector3(x, y, z);
    this.vector = new THREE.Vector3(0, 1, 0);
    this.scale = 100;
    this.size = 20;
    this.color = new THREE.Color(`hsl(${getRandomNumber(0, 360)}, 80%, 60%)`);
    this.dist = this.position.distanceTo(new THREE.Vector3());
    
    this.geometry = new THREE.BoxGeometry(this.size, this.size, this.size);
    this.material =
      new THREE.MeshLambertMaterial({
        color: this.color,
        transparent: true,
        opacity: 0.8
      });
    this.mesh = new THREE.Mesh(this.geometry, this.material);
    this.mesh.position.set(this.position.x, this.position.y, this.position.z);
    this.sketch.scene.add(this.mesh);
  }
  
  update(time) {
    //const value4d = simplex.noise4D(this.x * 0.1, this.y * 0.1, this.z * 0.1, time * 0.1);
    
    this.mesh.position.set(
      this.position.x,
      Math.tan(this.dist * 0.005 - time) * this.scale * this.vector.y + this.position.y,
      this.position.z
    );
    this.mesh.material.color.setHSL(Math.sin(this.dist * 0.005 - time), 0.8, 0.6);
    
    //this.mesh.rotation.x += 0.01;
    //this.mesh.rotation.y += 0.01;
  }
}

window.addEventListener('load', () => {
  console.clear();

  const loading = document.getElementById('loading');
  loading.classList.add('loaded');

  new Sketch();
});