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 keyMap = {}

// 3D Loaders.
const room = new GLTFLoader();
const image = new THREE.TextureLoader();

let pawTexture, fingerTexture, currentSprite;

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);

    room.load(
        // url of file
        '../test.gltf',
        // when resource is loaded
        function(gltf) {
            gltf.scene.position.y = -1;
            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);
        }
    );

    image.load('../paw.png', (texture) => {
        pawTexture = texture;
        image.load('../finger.png', (texture) => {
            fingerTexture = texture;
            const material = new THREE.SpriteMaterial({ map: texture });
            currentSprite = new THREE.Sprite(material);
            currentSprite.position.set(1, -0.7, -1.5);
            camera.add(currentSprite);
            scene.add(camera);

        });
    });

}

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);
        }
        if (keyMap['ShiftLeft']) {
            if (currentSprite && fingerTexture && currentSprite.material.map !== fingerTexture) {
                currentSprite.material.map = fingerTexture;
                console.log("finger up");
            }
        } else {
            if (currentSprite && pawTexture && currentSprite.material.map !== pawTexture) {
                currentSprite.material.map = pawTexture;
                console.log("finger down");
            }
        }
    }
    renderer.render(scene, camera);
}
renderer.setAnimationLoop(animate);