///<reference path="../node_modules/three/build/three.js" />
//<reference path="../node_modules/three/examples/js/loaders/GLTFLoader.js" />

"use strict";

/**
 * Loads a GLTF resource and retruns the data as a promise.
 * @param {THREE.GLTFLoader} loader instance of the loader to use.
 * @param {string} path URL from where to download.
 * @returns {Promise<{scene: THREE.Scene}>}
 */
function downloadModel(loader, path)
{
    return new Promise(function(resolve, reject){
        loader.load(
            path,
            function onLoadModel(gltf){
                resolve(gltf);
            },
            null,
            function(error){
                reject(error);
            }
        );
    });
}


document.addEventListener("DOMContentLoaded", async function pageInit(){

    /** @type {HTMLCanvasElement} */
    const canvas = document.getElementById("playground");
    const canvasWidth = Math.floor(canvas.clientWidth);
    const canvasHeight = Math.floor(canvas.clientHeight);

    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(50, canvasWidth / canvasHeight, 0.1, 1000);

    const renderer = new THREE.WebGLRenderer({
        canvas: document.getElementById("playground"),
        antialias: true
    });
    renderer.setSize(canvasWidth, canvasHeight);
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;

    document.body.appendChild(renderer.domElement);

    const geometry = new THREE.BoxGeometry(1,1,1);
    const material = new THREE.MeshPhongMaterial({color: 0x4512ff})
    const cube = new THREE.Mesh(geometry, material);
    cube.position.set(2,0,0);
    cube.castShadow = true;
    scene.add(cube);

    camera.position.z = 5;

    const light = new THREE.PointLight(0xffffff, 1, 50);
    light.position.set(5,5,5);
    light.castShadow = true;
    light.shadow.mapSize.width = 1024;
    light.shadow.mapSize.height = 1024;
    scene.add(light);

    const backLight = new THREE.PointLight(0xffffff, 0.1, 50);
    backLight.position.set(-5,5,5);
    scene.add(backLight);

    const plane = new THREE.Mesh(
        new THREE.PlaneBufferGeometry(5, 5, 10, 10), 
        new THREE.MeshPhongMaterial({color: 0xffffff})
    );
    plane.rotateX(-Math.PI/2);
    plane.position.y = -1;
    plane.receiveShadow = true;
    scene.add(plane);

    const loader = new THREE.GLTFLoader();

    const wordGLTF = await downloadModel(loader, "models/word.gltf");
    const word = wordGLTF.scene.children.find(c => c.name == "Text");
    word.castShadow = true;
    word.position.set(-2,0,0);
    scene.add(word);

    // renderer.gammaInput = true;
    // renderer.gammaOutput = true;

    // const helper = new THREE.CameraHelper(light.shadow.camera);
    // scene.add(helper);

    function animate(){
        requestAnimationFrame(animate);
        word.rotation.x += 0.01;
        word.rotation.y += 0.01;
        cube.rotation.x += 0.01;
        cube.rotation.y -= 0.01;
        renderer.render(scene, camera);
    }
    animate();

});