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

"use strict";

document.addEventListener("DOMContentLoaded", 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.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;
    scene.add(light);

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

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

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

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

});