import * as THREE from 'three';

let context, pannerNode, renderer, scene, camera, mesh, mybuffer, playing;
async function initiate() {
  const canvas = document.getElementById("canvas");
  canvas.addEventListener("wheel", move);
  canvas.addEventListener("click", function() {
    if (!playing && mybuffer) {
      play(mybuffer);
      playing = true;
    }
  });
  const width = canvas.width;
  const height = canvas.height;
  renderer = new THREE.WebGLRenderer({canvas: canvas});
  renderer.setClearColor(0xFFFFFF);
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(45, width/height, 0.1, 10000);
  camera.position.set(0, 0, 150);

  const geometry = new THREE.BoxGeometry(50, 50, 50);
  const material = new THREE.MeshPhongMaterial({color: 0xCCCCFF});
  mesh = new THREE.Mesh(geometry, material);
  mesh.rotation.y = 0.5;
  mesh.rotation.x = 0.5;
  scene.add(mesh);
  
  const light = new THREE.SpotLight(0xFFFFFF, 3);
  light.decay = 0;
  light.position.set(0, 100, 250);
  scene.add(light);
  renderer.render(scene, camera);

  context = new AudioContext();
  context.listener.positionX.value = 0;
  context.listener.positionY.value = 0;
  context.listener.positionZ.value = 150;

  try {
    const response = await fetch("engine.wav");
    if (!response.ok) {
      throw new Error("HTTP error: " + response.status);
    }
    const arraybuffer = await response.arrayBuffer();
    mybuffer = await context.decodeAudioData(arraybuffer);
  } catch (error) {
    console.error(error);
  }
}
function play(mybuffer) {
  const sourceNode = context.createBufferSource();
  sourceNode.buffer = mybuffer;
  sourceNode.loop = true;
  pannerNode = context.createPanner();
  pannerNode.refDistance = 100;
  sourceNode.connect(pannerNode);
  pannerNode.connect(context.destination);
  sourceNode.start(0);
}
function move(event) {
  if (playing) {
    mesh.position.z = Math.min(mesh.position.z - event.deltaY / 2, 70);
    pannerNode.positionX.value = mesh.position.x;
    pannerNode.positionY.value = mesh.position.y;
    pannerNode.positionZ.value = mesh.position.z;
    renderer.render(scene, camera);
  }
}
window.addEventListener("DOMContentLoaded", initiate);