import * as THREE from 'three';
import {OrbitControls} from 'https://unpkg.com/three@0.142.0/examples/jsm/controls/OrbitControls.js';
import {GLTFLoader} from 'https://unpkg.com/three@0.142.0/examples/jsm/loaders/GLTFLoader.js';
import {DRACOLoader} from 'https://unpkg.com/three@0.142.0/examples/jsm/loaders/DRACOLoader.js';
import { RoomEnvironment } from 'https://unpkg.com/three@0.142.0/examples/jsm/environments/RoomEnvironment.js';
import {LoadingBar} from 'https://niksgames.com/threejs-games-course/libs/LoadingBar.js';
import GUI from 'https://unpkg.com/three@0.142.0/examples/jsm/libs/lil-gui.module.min.js';

let camera, scene, renderer;
let object, light, clock, loadingBar, envmap;

init();

function init() {

  renderer = new THREE.WebGLRenderer();
  renderer.setPixelRatio( Math.min(2, window.devicePixelRatio ));
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );
  renderer.outputEncoding = THREE.sRGBEncoding;
  renderer.physicallyCorrectLights = true;

  //
  clock = new THREE.Clock();
  
  camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 100 );
  camera.position.set( 0, 0.05, 0.22 );

  scene = new THREE.Scene();
  scene.background = new THREE.Color(0xaaaaaa);

  const ambient = new THREE.HemisphereLight(0xffffff, 0xbbbbff, 0.5);
		scene.add(ambient);

  light = new THREE.DirectionalLight( 0xffffff, 1.5 );
  light.position.set( 0.2, 1, 1);
  scene.add( light );

  if (!('ontouchstart' in window)) window.addEventListener( 'resize', onWindowResize, false );
  
  const controls = new OrbitControls( camera, renderer.domElement );
  controls.target.y = 0.04;
  controls.update();
  controls.addEventListener( 'change', () => {
    renderer.render( scene, camera );
  })
  
  setEnvironment();
  loadModel();

  const gui = new GUI();
  const options = { rgbEncoding: true, 
                  envmap: true,
                  physicallyCorrectLights: true};
  gui.add(options,'rgbEncoding').onChange( value => {
    if (value){
      renderer.outputEncoding = THREE.sRGBEncoding;
    }else{
      renderer.outputEncoding = THREE.linearEncoding;
    }
  });
  gui.add(options,'envmap').onChange( value => {
    if (value){
      scene.environment = envmap;
    }else{
      scene.environment = null;
    }
  });
  gui.add(options,'physicallyCorrectLights').onChange( value => {
    renderer.physicallyCorrectLights = value;
  })
}

function setEnvironment(){
  const pmremGenerator = new THREE.PMREMGenerator( renderer );
  
	envmap = pmremGenerator.fromScene( new RoomEnvironment(), 0.04 ).texture;        
  scene.environment = envmap;
}

function loadModel(){
        const loader = new GLTFLoader( ).setPath('https://niksgames.com/courses/model-viewer/assets/');
        const dracoLoader = new DRACOLoader();
        dracoLoader.setDecoderPath( 'https://unpkg.com/three@0.142.0/examples/js/libs/draco/' );
        loader.setDRACOLoader( dracoLoader );
  
  loadingBar = new LoadingBar();

		// Load a glTF resource
		loader.load(
			// resource URL
			'motorcycle.glb',
			// called when the resource is loaded
			gltf => {
                
                object = gltf.scene;
                
				scene.add( gltf.scene );
        loadingBar.visible = false;
        renderer.render( scene, camera );
			},
			// called while loading is progressing
			xhr => {

				loadingBar.progress = (xhr.loaded / xhr.total);
				
			},
			// called when loading has errors
			err => {

				console.error( err.message );

			}  
        );
    }

function onWindowResize() {

  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize( window.innerWidth, window.innerHeight );
 
  renderer.render( scene, camera );
}

function render() {

  requestAnimationFrame( render );

  renderer.render(scene, camera);

}