import * as THREE from 'three'; import { Interaction } from 'three.interaction';

import { OrbitControls } from '../kmz/jsm/controls/OrbitControls.js'; import GltfLoadAnimatedObject from '../eZii-bricklayer-game/gltf-load-animated-object.js';

export default class EZIIBrickLayerGameMain {

constructor() {
        this.mixers = {};
        this.stoppedMixers = {};
        this.scene = undefined;
        this.cubes = [];
        this.docking = undefined;
        this.camera = undefined;
        this.renderer = undefined;
        this.controls = undefined;
        this.clock = new THREE.Clock();

    this.rayCaster = new THREE.Raycaster();
    this.mousePosition = new THREE.Vector2();

}

every10MilliSeconds(callback) {
        setInterval(callback, 10);
}

findDomDockingPoint() {
        var promise = new Promise((resolve, reject) => {
                var notFound = true;
                var i = 0;
                while(notFound) {
                        this.docking = document.body.querySelector('#docking-point-for-threejs');
                        if(!this.docking) {
                                i++;
                                if (i < 40) { continue } else { reject("couldn't find element with id docking-point-for-threejs") };
                        } else {

                                resolve();
                                notFound = false;
                        }
                }               
        });

        return promise;
}

init() {

        this.scene = new THREE.Scene();

        var geometry = new THREE.BoxGeometry( 100, 100, 10 );
        var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );

        // §
        this.cubes.push(new THREE.Mesh( geometry, material ));
        this.scene.add( this.cubes[0] );

        var geometry2 = new THREE.BoxGeometry( 100, 100, 10 );
        var material2 = new THREE.MeshBasicMaterial( {color: 0x0000ff} );

        // §
        this.cubes.push(new THREE.Mesh( geometry2, material2 ));
        this.scene.add(  this.cubes[1] );

        this.scene.background = new THREE.Color( 0x999999 );
        var light = new THREE.DirectionalLight( 0xffffff );
        light.position.set( 0.5, 1.0, 0.5 ).normalize();
        this.scene.add( light );
        this.camera = new THREE.PerspectiveCamera( 35, this.docking.clientWidth / this.docking.clientHeight, 1, 500 );
        this.camera.position.y = 5;
        this.camera.position.z = 10;
        this.scene.add( this.camera );
        this.grid = new THREE.GridHelper( 1000, 1000, 0xffffff, 0x555555 );
        this.scene.add( this.grid );
        this.renderer = new THREE.WebGLRenderer( { antialias: true } );
        this.renderer.setPixelRatio( window.devicePixelRatio );
        this.renderer.setSize( this.docking.clientWidth, this.docking.clientHeight );
        this.canvas = this.renderer.domElement;

        this.docking.appendChild( this.canvas );

        this.canvasPosition = $(this.canvas).position(); 

        this.interaction = new Interaction(this.renderer, this.scene, this.camera);

    this.controls = new OrbitControls( this.camera, this.renderer.domElement );
        // controls.addEventListener( 'change', render );
        this.controls.update();
        window.addEventListener( 'resize', this.onWindowResize, false );
}

onWindowResize() {
        this.camera.aspect = this.docking.clientWidth / this.docking.clientHeight;
        this.camera.updateProjectionMatrix();
        this.renderer.setSize( this.docking.clientWidth, this.docking.clientHeight );
        this.render();
}

render() {
        this.renderer.render( this.scene, this.camera );
}

moveObjectZAxis(object) {
        object.position.z += 10;
}

async addObject(id) {   
        var loadObject = new GltfLoadAnimatedObject(this.scene)

        let promise = new Promise(async function(resolve, reject) {
                let [object, mixer] = await loadObject.addObject(id);
                resolve([object, mixer, id])

        });

        return promise;
}

animate(id) {
        // debugger;
                        requestAnimationFrame( () => { this.animate.bind(this)(id) } );
                        if ( this.mixers[id] ) this.mixers[id].update( this.clock.getDelta() );
                        this.controls.update();
                        this.render();
}

stopAnimation(id) {
        this.stoppedMixers[id] = this.mixers[id];

        delete this.mixers[id];
}

startAnimation(id) {
        if(this.mixers[id] !== undefined) return;
        this.mixers[id] = this.stoppedMixers[id];

        delete this.stoppedMixers[id];
}

tiltCurrentlySelectedObjectUpwards() {
        if(window.currentlySelectedObject !== undefined) {
                window.currentlySelectedObject.tiltUpwards();

        } else {
                console.warn("currentlySelectedObject is undefined");
        }
}

tiltCurrentlySelectedObjectDownwards() {
        if(window.currentlySelectedObject !== undefined) {
                window.currentlySelectedObject.tiltDownwards();

        } else {
                console.warn("currentlySelectedObject is undefined");
        }
}

//
// getClicked3DPoint(evt) {
//     evt.preventDefault();
//
//     this.mousePosition.x = ((evt.clientX - this.canvasPosition.left) / this.docking.width) * 2 - 1;
//     this.mousePosition.y = -((evt.clientY - this.canvasPosition.top) / this.docking.height) * 2 + 1;
//
//     this.rayCaster.setFromCamera(this.mousePosition, this.camera);
//      debugger;
//     var intersects = this.rayCaster.intersectObjects(this.cubes, true);
//
//     if (intersects.length > 0)
//         return intersects[0].point;
// };

}