import * as THREE from 'three';
import { getCamera } from './cameras/PerspectiveCamera.js';
import {addAssetsOnScene} from './utils/addAssetsOnScene.js';
import * as PlayerMovement from './utils/playerMovement.js';
import * as Animations from './utils/animateMesh.js';

/*TODO*/
import $ from 'jquery'

function showNotification(HTMLText, color){
  $("#notification_bar p").html(HTMLText);
  $("#notification_bar").css( 'opacity', 0.9 ).animate({
    width:320
  }, 500);
}

showNotification("oui")
/*TODO*/

let Clock = new THREE.Clock();
THREE.Cache.enabled = true;//So we can request several time the same file without worrying : https://threejs.org/docs/#api/en/loaders/FileLoader

const APP_DEBUG = true;//Turn true to show player position in browser console

/* --------------------- */
/* |  SCENE CREATION   | */
/* --------------------- */
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0EB1D2);
const camera = getCamera();

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

//Here, we create/load every asset used, and add it in the scene
let assets  = await addAssetsOnScene(scene);

/* --------------------- */
/* |      MOVEMENT     | */
/* --------------------- */
// Events to listen keyboard inputs
document.addEventListener('keydown', PlayerMovement.handleKeyDown);
document.addEventListener('keyup', PlayerMovement.handleKeyUp);

/* --------------------- */
/* |     ANIMATIONS    | */
/* --------------------- */
//We can add an animationMixer on objects, and define ready to play actions on objects
//https://threejs.org/docs/#api/en/animation/AnimationAction
Animations.addAnimationMixerOnMesh(assets.player, ["Walk"]);
Animations.addAnimationMixerOnMesh(assets.nameplateModel, ["Float"]);assets.nameplateModel.animationActions.Float.play();
Animations.addAnimationMixerOnMesh(assets.worldStatue, ["Animation"]);assets.worldStatue.animationActions.Animation.play();
Animations.addAnimationMixerOnMesh(assets.printerStatue, ["Printing"]);assets.printerStatue.animationActions.Printing.play();


function animate() {
	requestAnimationFrame( animate );

  if(APP_DEBUG)console.log("Player position X : "+assets.player.scene.position.x+ " Y : "+assets.player.scene.position.y);

  PlayerMovement.updatePlayerPositionAnimation(assets.player, camera, scene);//Updating player position and rotation
  Animations.updateAnimations(Clock.getDelta());//Playing animations

	renderer.render( scene, camera );//Calculating and redering new frame

}
console.log("Ready to render scene, placed objects : "+scene.children.length);
animate();
