import {
  AmbientLight,
  Clock,
	Color,
	DirectionalLight,
	MathUtils,
	Mesh,
	Object3D,
	PerspectiveCamera,
	PlaneGeometry,
	RGBAFormat,
	Scene,
  ShaderMaterial,
	sRGBEncoding,
  Vector3,
	WebGLRenderer
} from "https://threejs.org/build/three.module.js";
import {OrbitControls} from 'https://threejs.org/examples/jsm/controls/OrbitControls.js';

/* = Constants ===============================================================*/
/* = Variables ===============================================================*/
let geometry, material, mesh;
let dtSize = 1200;	// Test Size
let PlnPtr = [0];
// Geometry --------------------------------------------------------------------
let SegNum = 50;
let SegRCs = SegNum+1;
// Wave Data
let dtWav1 = 10;					// Number of waves per Plane
let SgWav1 = SegNum/dtWav1;			// Segments per wave (50/10 = 5)
let DgSeg1 = 360/SgWav1;			// Degrees per segment (360/5 = 72)
let WvAmp1 = 5;						// Amplitude
let TmWav1 = 10;					// Period (seconds) to complete cycle

/* = Basic Values ============================================================*/
// Display
let	scene = new Scene();
	scene.background = new Color(0x1732c1);
let	renderer = new WebGLRenderer({antialias: true});
	renderer.setPixelRatio(window.devicePixelRatio);
	renderer.setSize(window.innerWidth, window.innerHeight);
	renderer.outputEncoding = sRGBEncoding;
	document.body.appendChild(renderer.domElement);
// Light
let dirLight = new DirectionalLight(0xffffff,1);
	dirLight.position.set(0,1000,-1000);	// Default position
	scene.add(dirLight);
let ambLight = new AmbientLight(0xffffff,1);
  scene.add(ambLight);
// Camera (substitute for Orbit Control)
let	camera = new PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 15000);
	scene.add(camera);
	camera.position.set(1500,100,0)
// Controls
let	controls = new OrbitControls(camera, renderer.domElement);
	controls.update();
// Clock
let clock = new Clock();
let	etime;

/* = Main Program ============================================================*/
	// Set Geometry
	geometry = new PlaneGeometry(dtSize, dtSize, SegNum, SegNum);
	geometry.rotateX(-Math.PI * 0.5);
		material = new ShaderMaterial({
		vertexShader: document.getElementById('vertexShader').textContent,
		fragmentShader: document.getElementById('fragmentShader').textContent,
		uniforms: {
			uTime: {value: 0.0},
      uColor: {value: new Color(0x2288ff)},
      uSunDirection: {value: new Vector3(0.0,0.5,2.0)},
      uAmbient: {value: 0.5}
		}
	});
	// Create and Position 4 Grids
	for (let n = 0; n < 4; n++) {
		PlnPtr[n] = new Mesh(geometry, material);
		scene.add(PlnPtr[n]);
	}
	// Create 4 Adjacent Meshes
	PlnPtr[0].position.set(-dtSize/2,0,-dtSize/2);
	PlnPtr[1].position.set(dtSize/2,0,-dtSize/2);
	PlnPtr[2].position.set(-dtSize/2,0,dtSize/2);
	PlnPtr[3].position.set(dtSize/2,0,dtSize/2);
	// Render
	rendAll();

/* 2 Render ==================================================================*/
function rendAll() {
	requestAnimationFrame(rendAll);
	etime = clock.getElapsedTime();
	material.uniforms.uTime.value = etime;
	controls.update();
   	renderer.render(scene, camera);				// Render
}