import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js';

// Variables
const renderer = new THREE.WebGLRenderer({ canvas: document.querySelector('#kennel'), });
const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
const light = new THREE.HemisphereLight(0xeeeeff, 0x777788, 2.5);
const controls = new PointerLockControls(camera, renderer.domElement);
const scene = new THREE.Scene();
const clock = new THREE.Clock();
const loader = new GLTFLoader();
const keyMap = {}

init();

//Initialisation
function init() {
    // Renderer
    renderer.setSize(window.innerWidth, window.innerHeight);

    // Camera
    camera.position.z = 5;

    // Light
    light.position.set(0.5, 1, 0.75);
    scene.add(light);

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

    // Controller
    document.addEventListener('click', () => {
        controls.lock();
    });

    const onDocumentKey = (e) => {
        keyMap[e.code] = e.type === 'keydown';
    };
    document.addEventListener('keydown', onDocumentKey, false);
    document.addEventListener('keyup', onDocumentKey, false);

    // GLFT Loader
    loader.load(
        // url of file
        '../test.gltf',
        // when resource is loaded
        function(gltf) {
            scene.add(gltf.scene);

            gltf.animations;
            gltf.scene;
            gltf.scenes;
            gltf.cameras;
            gltf.asset;
        },
        //when loading is progressing
        function(xhr) {
            console.log((xhr.loaded / xhr.total * 100) + '% loaded');
        },
        // when error
        function(error) {
            console.log('a fucking error lmao: ', error);
        }
    );
}

function animate() {
    const delta = clock.getDelta();

    if (controls.isLocked) {
        if (keyMap['KeyW']) controls.moveForward(delta * 5);
        if (keyMap['KeyS']) controls.moveForward(-delta * 5);
        if (keyMap['KeyA']) controls.moveRight(-delta * 5);
        if (keyMap['KeyD']) controls.moveRight(delta * 5);
    }

    renderer.render(scene, camera);
}
renderer.setAnimationLoop(animate);