import SocketIO, { Socket } from 'socket.io-client';
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { Game } from './game';
import { ThirdPersonCamera } from './object/camera';

const socket = SocketIO({ autoConnect: false });

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000,
);

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

renderer.setClearColor(0x00ddff);

const sun = new THREE.DirectionalLight(0xffffff);
sun.position.set(10, 10, 0);
scene.add(sun);

const ambient = new THREE.AmbientLight(0xe8e8e8, 0.2);
scene.add(ambient);

const cube = new THREE.Mesh(
  new THREE.BoxGeometry(100, 1, 100, 10, 1, 10),
  new THREE.MeshToonMaterial({ color: 0x32a852 }),
);
cube.position.set(0, -0.5, 0);
scene.add(cube);

camera.position.set(0, 4, 4);

const game = new Game(socket, camera, scene, renderer.domElement);

const clock = new THREE.Clock();
let delta: number;
function animate() {
  requestAnimationFrame(animate);

  delta = clock.getDelta();
  game.update(delta);

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

game.initialize().catch((e) => console.error(e));