import { ResizeSystem } from 'engine/systems/ResizeSystem.js';
import { UpdateSystem } from 'engine/systems/UpdateSystem.js';
import { GLTFLoader } from 'engine/loaders/GLTFLoader.js';
import { OrbitController } from 'engine/controllers/OrbitController.js';
import { RotateAnimator } from 'engine/animators/RotateAnimator.js';
import { LinearAnimator } from 'engine/animators/LinearAnimator.js';
import { quat } from './lib/glm.js';

import { Camera, Model, Node, Transform } from 'engine/core.js';

import { Renderer } from './Renderer.js';
import { Light } from './Light.js';

const canvas = document.querySelector('canvas');
const renderer = new Renderer(canvas);
await renderer.initialize();

const gltfLoader = new GLTFLoader();
await gltfLoader.load('./models/monkey/monkey.gltf');

const gltfLoader2 = new GLTFLoader();
await gltfLoader2.load('./models/cone/cone.gltf');

const scene = gltfLoader.loadScene(gltfLoader.defaultScene);

const camera = scene.find((node) => node.getComponentOfType(Camera));
const cameraTransform = camera.getComponentOfType(Transform);
cameraTransform.rotation = [0, 0, 0, 1];
cameraTransform.translation = [0, 0, 10];

camera.addComponent(
    new OrbitController(camera, document.body, {
        distance: 8,
    }),
);

const model = scene.find((node) => node.getComponentOfType(Model));
// model.addComponent(
//     new LinearAnimator(model, {
//         startPosition: [1, 0, 0],
//         endPosition: [-1, 0, 0],
//         duration: 5,
//         loop: true,
//     }),
// );

const light = gltfLoader2.loadScene(gltfLoader.defaultScene);

light.addComponent(
    new Transform({
        translation: [0, 0, 0],
    }),
);
light.addComponent(
    new Light({
        ambient: 0,
        intensity: 0.5,
        cutoffAngle: 45 * (Math.PI / 180),
    }),
);
light.addComponent({
    update(t, dt) {
        const transform = light.getComponentOfType(Transform);

        const rotation = quat.create();
        quat.rotateX(rotation, rotation, (Math.PI / 180) * t * 100);

        transform.rotation = rotation;
    },
});
// light.addComponent(
//     new LinearAnimator(light, {
//         startPosition: [0, 0, 0],
//         endPosition: [0, 0, 0],
//         duration: 5,
//         loop: true,
//     }),
// );
scene.addChild(light);

function update(time, dt) {
    scene.traverse((node) => {
        for (const component of node.components) {
            component.update?.(time, dt);
        }
    });
}

function render() {
    renderer.render(scene, camera);
}

function resize({ displaySize: { width, height } }) {
    camera.getComponentOfType(Camera).aspect = width / height;
}

new ResizeSystem({ canvas, resize }).start();
new UpdateSystem({ update, render }).start();