import "./style.css";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { NURBSCurve } from "three/examples/jsm/curves/NURBSCurve.js";

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

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

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 THREE.Scene();
scene.add(new THREE.AmbientLight(0xffffff));
scene.add(
    (() => {
        const lights = new THREE.DirectionalLight(0xffffff, 1);
        lights.position.set(-1, -3, -2);
        return lights;
    })(),
);
scene.add(
    (() => {
        const lights = new THREE.DirectionalLight(0xffffff, 3);
        lights.position.set(1, 3, 2);
        return lights;
    })(),
);
scene.add(
    (() => {
        const curve = new NURBSCurve(
            3,
            [0, 0, 0, 0, 1, 1, 1, 1],
            [
                new THREE.Vector4(-1, -1, 0, 1),
                new THREE.Vector4(-1, 1, 0, 1),
                new THREE.Vector4(1, 1, 0, 1),
                new THREE.Vector4(1, -1, 0, 1),
            ],
        );
        const geometry = new THREE.TubeGeometry(curve, 16, 0.1, 8, false);
        const material = new THREE.MeshPhongMaterial({ color: 0xbada55, side: THREE.DoubleSide });
        return new THREE.Mesh(geometry, material);
    })(),
);

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