// Import necessary packages
import { Scene, WebGLRenderer, PerspectiveCamera } from 'three';
import { OrbitControls } from 'three/examples/webgl2/controls';

// Initialize the scene
const scene = new Scene();
scene.setSize(600, 600);

// Create a camera
const camera = new PerspectiveCamera(45, 1, 0.1, 1000);
camera.position.z = 3;

// Add a light source
const light = new PointLight(0xffffff, 1, 1000, 0.5);
light.position.set(-20, 20, -20);
scene.add(light);

// Create a renderer
const renderer = new WebGLRenderer({
  canvas: document.getElementById('canvas'),
  antialias: true,
  preserveDrawingBuffer: false,
});
renderer.setSize(600, 600);

// Add controls
const controls = new OrbitControls(camera, renderer.domElement);
controls.enablePan();
controls.enableZoom();

// Create a group to hold the slot machine elements
const slotMachineGroup = new Group();

// Create four stacked windows with different backgrounds and text
const window1 = new Group().addChild(new Cylinder(5, 5, 20, 0.5)).setMatrixAutoScale();
window1.material.color = new Color('#0000ff');
window1.material.opacity = 0.7;
window1.material.transparent = true;
window1.material.wireframe = false;

const window2 = new Cylinder(5, 5, 20, 0.5).setMatrixAutoScale();
window2.material.color = new Color('#ff0000');
window2.material.opacity = 0.7;
window2.material.transparent = true;
window2.material.wireframe = false;

const window3 = new Cylinder(5, 5, 20, 0.5).setMatrixAutoScale();
window3.material.color = new Color('#00ff00');
window3.material.opacity = 0.7;
window3.material.transparent = true;
window3.material.wireframe = false;

const window4 = new Cylinder(5, 5, 20, 0.5).setMatrixAutoScale();
window4.material.color = new Color('#ff00ff');
window4.material.opacity = 0.7;
window4.material.transparent = true;
window4.material.wireframe = false;

// Add the windows to the slot machine group
slotMachineGroup.addChild(window1);
slotMachineGroup.addChild(window2);
slotMachineGroup.addChild(window3);
slotMachineGroup.addChild(window4);

// Add buttons for copy, result, and restart
const copyButton = new Cylinder(5, 5, 10, 0.5).setMatrixAutoScale();
copyButton.material.color = new Color('#ff0000');
copyButton.material.opacity = 0.7;
copyButton.material.transparent = true;
copyButton.material.wireframe = false;
copyButton.position.set(10, 25, 0);

const resultButton = new Cylinder(5, 5, 10, 0.5).setMatrixAutoScale();
resultButton.material.color = new Color('#ff0000');
resultButton.material.opacity = 0.7;
resultButton.material.transparent = true;
resultButton.material.wireframe = false;
resultButton.position.set(10, 50, 0);

const restartButton = new Cylinder(5, 5, 10, 0.5).setMatrixAutoScale();
restartButton.material.color = new Color('#ff0000');
restartButton.material.opacity = 0.7;
restartButton.material.transparent = true;
restartButton.material.wireframe = false;
restartButton.position.set(10, 85, 0);

// Add the buttons to the slot machine group
slotMachineGroup.addChild(copyButton);
slotMachineGroup.addChild(resultButton);
slotMachineGroup.addChild(restartButton);

// Add the slot machine group to the scene
scene.add(slotMachineGroup);

// Add controls to the scene
controls.update();

// Add event listeners for button clicks
window1.addEventListener('click', function() {
  console.log('Copy button clicked');
});

window2.addEventListener('click', function() {
  console.log('Result button clicked');
});

window3.addEventListener('click', function() {
  console.log('Restart button clicked');
});

// Add the scene to the document
document.body.appendChild(renderer.domElement);

// Start the animation loop
const frameRate = 10; // update every frame
requestAnimationFrame(animate);

function animate() {
  // Update the slot machine elements
  window1.material.color.setHex(Math.floor(Math.random() * 256));
  window2.material.color.setHex(Math.floor(Math.random() * 256));
  window3.material.color.setHex(Math.floor(Math.random() * 256));
  window4.material.color.setHex(Math.floor(Math.random() * 256));

  // Update the buttons' text based on the current state of the slot machine
  copyButton.material.color.setHex(Math.floor(Math.random() * 256));
  resultButton.material.color.setHex(Math.floor(Math.random() * 256));
  restartButton.material.color.setHex(Math.floor(Math.random() * 256));

  // Update the buttons' position based on the current state of the slot machine
  copyButton.position.x = Math.random() * 100 - 50;
  resultButton.position.x = Math.random() * 100 - 50;
  restartButton.position.x = Math.random() * 100 - 50;

  // Update the slot machine group's position based on the current state of the slot machine
  slotMachineGroup.position.set(Math.random() * 100 - 50, Math.random() * 100 - 50, Math.random() * 100 - 50);

  // Update the scene
  renderer.render(scene, camera);

  // Request another frame
  requestAnimationFrame(animate);
}