import "./style.css";
import "./audioSelector";
import { WebGLRenderer, PerspectiveCamera, Scene, AmbientLight, DirectionalLight, Group } from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { CurveRenderer } from "./CurveRenderer";

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

const camera = new PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 2000);
camera.position.set(0, 5, 15);

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.update();

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

const scene = new Scene();
scene.add(new AmbientLight(0xffffff));
scene.add(
    (() => {
        const lights = new DirectionalLight(0xffffff, 1);
        lights.position.set(-1, -3, -2);
        return lights;
    })(),
);
scene.add(
    (() => {
        const lights = new DirectionalLight(0xffffff, 3);
        lights.position.set(1, 3, 2);
        return lights;
    })(),
);
const curveGroup = new Group();
const curveRenderer = new CurveRenderer(curveGroup);
scene.add(curveGroup);

window.requestAnimationFrame(animate);
function animate() {
    controls.update();
    curveRenderer.update();
    renderer.render(scene, camera);
    window.requestAnimationFrame(animate);
}