import * as THREE from "three";

const scene = new THREE.Scene();
scene.background = new THREE.Color(0xf3f5f8);

const camera = new THREE.PerspectiveCamera(
	55,
	window.innerWidth / window.innerHeight,
	0.1,
	100
);

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const ambientLight = new THREE.AmbientLight(0xffffff, 0.85);
scene.add(ambientLight);

const keyLight = new THREE.DirectionalLight(0xffffff, 1);
keyLight.position.set(3, 4, 5);
scene.add(keyLight);

const cube = new THREE.Mesh(
	new THREE.BoxGeometry(1.6, 1.6, 1.6),
	new THREE.MeshStandardMaterial({ color: 0x2a9d8f, roughness: 0.45, metalness: 0.1 })
);
scene.add(cube);

const target = new THREE.Vector3(0, 0, 0);

const cameraPresets = {
	front: new THREE.Vector3(0, 1.2, 6.5),
	side: new THREE.Vector3(6.5, 1.4, 0),
	topAngled: new THREE.Vector3(3.8, 5.4, 4.2),
};

let activePreset = "front";
let desiredPosition = cameraPresets.front.clone();
camera.position.copy(desiredPosition);
camera.lookAt(target);

const presetButtons = Array.from(document.querySelectorAll(".preset-btn"));

function setActiveButton(presetName) {
	presetButtons.forEach((button) => {
		const isActive = button.dataset.preset === presetName;
		button.classList.toggle("active", isActive);
	});
}

function switchCameraPreset(presetName) {
	const nextPreset = cameraPresets[presetName];
	if (!nextPreset) {
		return;
	}

	activePreset = presetName;
	desiredPosition = nextPreset.clone();
	setActiveButton(activePreset);
}

presetButtons.forEach((button) => {
	button.addEventListener("click", () => {
		const presetName = button.dataset.preset;
		switchCameraPreset(presetName);
	});
});

window.addEventListener("keydown", (event) => {
	if (event.key === "1") {
		switchCameraPreset("front");
	}
	if (event.key === "2") {
		switchCameraPreset("side");
	}
	if (event.key === "3") {
		switchCameraPreset("topAngled");
	}
});

setActiveButton(activePreset);

function animate() {

	camera.position.lerp(desiredPosition, 0.08);
	camera.lookAt(target);

	renderer.render(scene, camera);
}

renderer.setAnimationLoop(animate);

window.addEventListener("resize", () => {
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize(window.innerWidth, window.innerHeight);
});