import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.114/build/three.module.js";
import {
    OrbitControls
}
from "https://cdn.jsdelivr.net/npm/three@0.114/examples/jsm/controls/OrbitControls.js";
import {
    DragControls
}
from "https://cdn.jsdelivr.net/npm/three@0.114/examples/jsm/controls/DragControls.js";
"use strict";

/*
up axis: y
2d plane coordinates: x,z
 */

// for debugging purposes we allow switching backto perspective:
let g_orthographic = true;
var g_camera, g_scene, g_renderer;
var g_controls;

const g_frustumSize = 50;
let g_cam_params = {
    aspect_ratio() {
        return window.innerWidth / window.innerHeight;
    },
    left() {
        return g_frustumSize * this.aspect_ratio() * (-0.5);
    },
    right() {
        return g_frustumSize * this.aspect_ratio() * 0.5;
    },
    top() {
        return g_frustumSize * 0.5;
    },
    bottom() {
        return g_frustumSize * (-0.5);
    },
    near: 1,
    far: 1000,
};

// ---------------------------------------------------------------
let g_bezier = {
    ctrlPointInitList: [
        new THREE.Vector3(-5, -5, 0),
        new THREE.Vector3(-2, 5, 0),
        new THREE.Vector3(2, 5, 0),
        new THREE.Vector3(5, -5, 0),
    ],

    ctrlPointMeshes:[],
  
    ctrlPoint(i) {
        return this.ctrlPointMeshes[i].position.clone();
    },

    // Add control points to scene
    addCtrlPoints(scene, draggableList) {
        const pointGeometry = new THREE.CircleGeometry(0.3 /*radius*/, 32);
        const pointMaterial = new THREE.MeshBasicMaterial({
            color: 0xaa0000
        });
        for (const p of this.ctrlPointInitList) {            
            const point = new THREE.Mesh(pointGeometry, pointMaterial);
            this.ctrlPointMeshes.push(point);
          
            point.position.set(p.x, p.y, p.z);
            //point.rotation.x = -Math.PI * 0.5;
            
            scene.add(point);
            draggableList.push(point);
        }
    },

    // evaluate cubic bezize at t in [0.0, 1.0]
    eval(t) {
        const p1 = this.ctrlPoint(0).multiplyScalar((1 - t) ** 3);
        const p2 = this.ctrlPoint(1).multiplyScalar(3 * ((1 - t) ** 2) * t);
        const p3 = this.ctrlPoint(2).multiplyScalar(3 * (1 - t) * (t ** 2));
        const p4 = this.ctrlPoint(3).multiplyScalar(t ** 3);

        const x = p1.x + p2.x + p3.x + p4.x;
        const y = p1.y + p2.y + p3.y + p4.y;
        const z = p1.z + p2.z + p3.z + p4.z;

        return new THREE.Vector3(x, y, z);
    },

    sampleCurve(curvePoints, segments) {
        for (let t = 0; t < segments; t += 1) {
            //console.log( t / (segments-1.0) );
          
            let p = this.eval( t / (segments-1) );
            curvePoints.push( p );
        }
    },

    resolution: 50,
    curveLine: null,
  
    addCurve(scene){
        let curveGeometry = new THREE.BufferGeometry();  
        const positions = new Float32Array( g_bezier.resolution * 3 ); // 3 vertices per point
        curveGeometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
        const curveMaterial = new THREE.LineBasicMaterial({
            color: 0x00ff02
        });

        this.curveLine = new THREE.Line(curveGeometry, curveMaterial);
        this.curveLine.position.set(0, 0, 0);
        //g_bezier.curveLine.rotation.x = Math.PI * 0.5;
        this.curveLine.geometry.attributes.position.needsUpdate = true;
        scene.add(g_bezier.curveLine);
    }
}; 
// ------------------------------------------------------------------------------


function init() {
    let container = document.createElement('div');
    document.body.appendChild(container);

    if (!g_orthographic) {
        g_camera = new THREE.PerspectiveCamera(
                60,
                g_cam_params.aspect_ratio(),
                g_cam_params.near, g_cam_params.far);
    } else {
        g_camera = new THREE.OrthographicCamera(
                g_cam_params.left(),
                g_cam_params.right(),
                g_cam_params.top(),
                g_cam_params.bottom(),
                g_cam_params.near,
                g_cam_params.far);
    }
    // OrthographicCamera( left , right , top , bottom , near , far )

    g_camera.position.set(0, 0, g_frustumSize);
    g_camera.lookAt(0, 0, 0);

    g_scene = new THREE.Scene();
    g_scene.background = new THREE.Color(0xffffff); //0xa0a0a0

    if (true) {
        let light1 = new THREE.HemisphereLight(0xffffff, 0x444444);
        light1.position.set(0, 200, 0);
        g_scene.add(light1);

        let light2 = new THREE.DirectionalLight(0xbbbbbb);
        light2.position.set(0, 200, 100);
        light2.castShadow = true;
        light2.shadow.camera.top = 180;
        light2.shadow.camera.bottom =  - 100;
        light2.shadow.camera.left =  - 120;
        light2.shadow.camera.right = 120;
        g_scene.add(light2);
    }
    //
    //scene.add(new THREE.CameraHelper(light.shadow.camera));

    // ground
    /*
    let mesh = new THREE.Mesh(new THREE.PlaneBufferGeometry(2000, 2000), new THREE.MeshPhongMaterial({ color: 0x999999, depthWrite: false }));
    mesh.rotation.x = - Math.PI / 2;
    mesh.receiveShadow = true;
    g_scene.add(mesh);
     */

    let grid = new THREE.GridHelper(
            g_frustumSize /*size*/,
            50 /*divisions*/,
            0x000000, 0x999999);
    //grid.divisions = 2;
    grid.position.set(0,0,-1);
    grid.rotation.x = -Math.PI * 0.5;
    grid.material.opacity = 1.0;
    grid.material.transparent = true;
    g_scene.add(grid);

    g_renderer = new THREE.WebGLRenderer({
        antialias: true
    });
    g_renderer.setPixelRatio(window.devicePixelRatio);
    g_renderer.setSize(window.innerWidth, window.innerHeight);
    g_renderer.shadowMap.enabled = true;
    document.body.style.margin = 0;
    document.body.style.padding = 0;
    document.body.style.overflow = 'hidden';
    document.body.style.position = 'fixed';
    container.appendChild(g_renderer.domElement);
    window.addEventListener('resize', onWindowResize, false);

    g_controls = new /*THREE.*/ OrbitControls(g_camera, g_renderer.domElement);
    g_controls.enableRotate = !g_orthographic;
    g_controls.screenSpacePanning = true;
    g_controls.target.set(0, 0, 0);
    g_controls.update();

    var draggableObjects = [];

    //draggableObjects.push(mesh);
    //g_scene.add(g_cogPointMesh);


    // Create a group to hold the points
    //const pointsGroup = new THREE.Group();
    //g_scene.add(pointsGroup);

    // Add Bézier curve and control points:
    g_bezier.addCtrlPoints(g_scene, draggableObjects);    
    g_bezier.addCurve(g_scene);
  
  

    /* Add blue box
    let boxGeometry = new THREE.BoxBufferGeometry(10, 10, 10);
    let blue = new THREE.MeshPhongMaterial({
    color: 0x3399dd
    });
    let white = new THREE.MeshLambertMaterial({
    color: 0x888888
    });

    let box = new THREE.Mesh(boxGeometry, blue);
    g_scene.add(box);
     */

    var dragControls = new /*THREE.*/ DragControls(draggableObjects, g_camera, g_renderer.domElement);

    dragControls.addEventListener('dragstart', function () {
        g_controls.enabled = false;
    });
    dragControls.addEventListener('dragend', function () {
        g_controls.enabled = true;
    });

}

// ---------------------------------------------------------------

function onWindowResize() {
    g_camera.left = g_cam_params.left();
    g_camera.right = g_cam_params.right();
    g_camera.top = g_cam_params.top();
    g_camera.bottom = g_cam_params.bottom();
    g_camera.aspect = g_cam_params.aspect_ratio();
    g_camera.updateProjectionMatrix();
    g_renderer.setSize(window.innerWidth, window.innerHeight);
}

// ------------------------------------------------------------------

function animate() {

    
    const curvePoints = [];
    g_bezier.sampleCurve(curvePoints, g_bezier.resolution); 
  
    for (let v = 0; v < g_bezier.resolution; v++) {
        let p = curvePoints[v];
        g_bezier.curveLine.geometry.attributes.position.setXYZ(v, p.x, p.y, p.z);
    }
    g_bezier.curveLine.geometry.attributes.position.needsUpdate = true; 
  
    //g_bezier.curveLine.geometry.computeBoundingBox();
    //g_bezier.curveLine.geometry.computeBoundingSphere();
 
  
    requestAnimationFrame(animate);
    g_renderer.render(g_scene, g_camera);

}

// -------------------------------------------------------------------


init();
animate();