import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';
import { FontLoader } from 'three/addons/loaders/FontLoader.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import GUI from 'lil-gui';

const gui = new GUI();

const sizes = {
    width: window.innerWidth,
    height: window.innerHeight
};

const scene = new THREE.Scene();
const fontLoader = new FontLoader();
const textureLoader = new THREE.TextureLoader();
const gltfLoader = new GLTFLoader();

scene.add(new THREE.AmbientLight());

const light = new THREE.PointLight();
light.intensity = 50;
light.position.y = 6;
scene.add(light);

const matcapTexture = textureLoader.load('/site/textures/matcaps/gold.png');
matcapTexture.colorSpace = THREE.SRGBColorSpace;

const material = new THREE.MeshMatcapMaterial({ matcap: matcapTexture });

fontLoader.load('/site/fonts/helvetiker_regular.typeface.json', function (font) {
    const textGeometry = new TextGeometry('oui oui baguette', {
        font,
        size: 1,
        depth: 0.5
    });

    textGeometry.center();

    const cubeMesh = new THREE.Mesh(textGeometry, material);
    scene.add(cubeMesh);

    cubeMesh.position.x = 0;
    cubeMesh.position.y = 0;

    gui.add(cubeMesh.position, 'y', -3, 3, 0.01);
    gui.add(cubeMesh, 'visible');
    gui.add(cubeMat, 'wireframe');
    gui.addColor(cubeMat, 'color');
});

gltfLoader.load('/site/models/baguette.glb', function (gltf) {
    for (let i = 0; i < 100; i++) {
        const baguette = gltf.scene.clone();
        baguette.position.x = (Math.random() - 0.5) * 10;
        baguette.position.y = (Math.random() - 0.5) * 10;
        baguette.position.z = (Math.random() - 0.5) * 10;
        baguette.rotation.x = Math.random() * Math.PI;
        baguette.rotation.y = Math.random() * Math.PI;
        const scale = Math.random();
        baguette.scale.set(scale, scale, scale);
        scene.add(baguette);
    }
});


const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height);
camera.position.z = 5;

//const axesHelper = new THREE.AxesHelper(1);
//scene.add(axesHelper);

const canvas = document.getElementById('three');

function updateSize() {
    sizes.width = window.innerWidth;
    sizes.height = window.innerHeight;

    camera.aspect = sizes.width / sizes.height;
    camera.updateProjectionMatrix();

    renderer.setSize(sizes.width, sizes.height);
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
}

const renderer = new THREE.WebGLRenderer({ canvas });

updateSize();

const clock = new THREE.Clock();

const controls = new OrbitControls(camera, canvas);

function render() {
    const elapsedTime = clock.getElapsedTime();

    renderer.render(scene, camera);

    requestAnimationFrame(render);
}

requestAnimationFrame(render);

window.addEventListener('resize', () => {
    updateSize();
});

window.addEventListener('dblclick', () => {
    if (!document.fullscreenElement) {
        canvas.requestFullscreen();
    } else {
        document.exitFullscreen();
    }
});
