// import * as THREE from '../build/three.module.js';

import * as THREE from 'three'; import { GLTFLoader } from './gltf/jsm/loaders/GLTFLoader.js';

import { OrbitControls } from './kmz/jsm/controls/OrbitControls.js';

$(function() {

var notFound = true;
var i = 0;
while(notFound) {
        var docking = document.body.querySelector('#docking-point-for-threejs');
        console.log(docking);
        if(!docking) {
                i++;
                if (i < 40) { continue } else { break };
        } else {
                notFound = false;
        }

        var camera, scene, renderer;
        var cube, cube2, cube3;
        var gltf, background, envMap, mixer, gui, extensionControls, controls;
        var clock = new THREE.Clock();

        function init() {

                scene = new THREE.Scene();

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

                // §
                cube = new THREE.Mesh( geometry, material );
                scene.add( cube );

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

                // §
                cube2 = new THREE.Mesh( geometry2, material2 );
                scene.add( cube2 );

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

            controls = new OrbitControls( camera, renderer.domElement );
                // controls.addEventListener( 'change', render );
                controls.update();
                window.addEventListener( 'resize', onWindowResize, false );
        }
        function onWindowResize() {
                camera.aspect = docking.clientWidth / docking.clientHeight;
                camera.updateProjectionMatrix();
                renderer.setSize( docking.clientWidth, docking.clientHeight );
                render();
        }

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

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

        function addObject() {                  
                let loadingManager = new THREE.LoadingManager();

                loadingManager.getHandler = function(arg) { console.log(arg) }

                var loader = new GLTFLoader(loadingManager);

                // manager.addHandler( /\.tga$/i, new TGALoader() );

                loader.load( '/gltf_models/2.gltf', function ( gltf ) {
                        // gltf.scene.position.y = 0.5;

                        var object = gltf.scene;
                        var animations = gltf.animations;                               

                        console.log(animations.length);

                        if ( animations && animations.length ) {
                                                                mixer = new THREE.AnimationMixer( object );
                                                                for ( var i = 0; i < animations.length; i ++ ) {
                                                                        var animation = animations[ i ]
                                                                        var action = mixer.clipAction( animation );
                                                                        action.play();
                                                                }
                                                        }

                        scene.add( object );

                        console.log(object);

                },

                // called while loading is progressing
                function ( xhr ) {

                        console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

                },
                // called when loading has errors
                function ( error ) {

                        console.log( 'An error happened' );
                        console.log( error );

                }

         );
        }

        function animate() {
                                requestAnimationFrame( animate );
                                if ( mixer ) mixer.update( clock.getDelta() );
                                controls.update();
                                render();
        }

        init();
        moveObjectZAxis(cube2);
        addObject();
        animate();

}

});