//Import THREE.js library
import * as THREE from 'three';
//To allow for the camera to move around the scene
import { OrbitControls } from 'three/examples/jsm/Addons.js';
//To allow for importing the.gltf file
import { GLTFLoader } from 'three/examples/jsm/Addons.js';

//Create a Three.JS Scene
const scene = new THREE.Scene();
// Create a new camera with position and angles
const camera = new THREE.PerspectiveCamera(
    75, 
    window.innerWidth / window.innerHeight, 
    0.1, 
    1000
);

//Keep track of the mouse position, so we can make the tiger move
let mouseX = window.innerWidth / 2;
let mouseY = window.innerHeight / 2;

//Keep the 3D object on a global variable so we can access ir later
let object;

//OrbitControls allow the camera to move around the scene
let controls;

//Set wich object to render
let objToRender = 'tiger';

//Instantiate a loader for the .gltf file
const loader = new GLTFLoader();

//Load the file 
loader.load(
    `models/${objToRender}/scene.gltf`,
    function (gltf) {
        //If the file is loaded, add it to the scene
        object = gltf.scene;
        scene.add(object);
    },
    function (xhr) {
        //While it is still loading, log the process
        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
    },
    function (error) {
        //If there is an error, log it
        console.error(error);
    }
);

//Instantiate a new renderer and set its size
const renderer = new THREE.WebGLRenderer({ alpha: true });
// Alpha: true allows for the transparent background
renderer.setSize(window.innerWidth, window.innerHeight);

//Add the renderer to the DOM
document.getElementById("container3D").appendChild(renderer.domElement);

//Set how far the camera will be from the 3D model
camera.position.z = objToRender === "tiger" ? 25 :500;

//Add Lights to the scene, so we can actually see the 3D model
const topLight = new THREE.DirectionalLight(0xffffff, 1);
//(color, intensity)

//Create top Light
topLight.position.set(500, 500, 500);
//the most top-left-ish
topLight.castShadow = true;
//Add top Light
scene.add(topLight);

//Create ambient Light
const ambientLight = new THREE.AmbientLight(0x333333, objToRender === "tiger" ? 5 : 1);
//Add ambient Light
scene.add(ambientLight);

//This adds controls to the camera, so we can rotate / zoom it with the mouse
if (objToRender === "tiger") {
    controls = new OrbitControls(camera, renderer.domElement);
}

//Render the scene
function animate() {
    requestAnimationFrame(animate);
    //Here we could add some code to update the scene, adding some automatic movement

    //Make the tiger eye move
    if (object && objToRender === "tiger") {
        //Constants that look quite good
        object.rotation.y = -3 + mouseX / window.innerWidth * 3;
        object.rotation.x = -1.2 + mouseY *2.5 / window.innerHeighth;
        }
        renderer.render(scene, camera);
}

//Add a listener to the window, so we can resize the window and the camera
window.addEventListener("resize", function() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

//Add mouse position listiner, so we can make the tiger move
document.onmousemove = (e) => {
    mouseX = e.clientX;
    mouseY = e.clientY;
}

//Start the 3D rendering
animate();

// const renderer = new THREE.WebGLRenderer();
// renderer.setSize(window.innerWidth);
// document.body.appendchild(renderer.domElement);
// const scene = new THREE.Scene();
// const camera = new THREE.PerspectiveCamera(
//     75,
//     window.innerWidth / window.innerHeight,
//     0.1
//     1000
// );
// const axesHelper = new THREE.AxwsHelper(5);
// scene.add(axesHelper);
// camera.position.set(0, 2, 5)
// const 
// renderer.render(scene, camera)


// }
// .scene, canvas{
//     position: absolute;
//     width: 100%;
//     height: 100%;
// }