import * as EASEL from "easel";

const raycaster = new EASEL.Raycaster();
let selectedMesh = null;

canvas.addEventListener("click", (event) => {
  const x = (event.offsetX / canvas.clientWidth) * 2 - 1;
  const y = -(event.offsetY / canvas.clientHeight) * 2 + 1;

  camera.updateMatrixWorld();
  const camForRay = {
    type: camera.type,
    matrixWorld: camera.matrixWorld,
    projectionMatrixInverse: new EASEL.Matrix4()
      .copy(camera.projectionMatrix)
      .invert(),
  };

  raycaster.setFromCamera({ x, y }, camForRay);
  const hits = raycaster.intersectObjects(meshes);
  const hit = hits.length > 0 ? hits[0].object : null;

  if (selectedMesh !== null) {
    selectedMesh.material.color.set(baseColors.get(selectedMesh));
  }

  if (hit !== null && hit !== selectedMesh) {
    selectedMesh = hit;
    selectedMesh.material.color.set(0xffffff);
  } else {
    selectedMesh = null;
  }
});