// Global ATON

const material = {
    color: "#e6f2ff",
    emissive: true,
};

const Scene = {};

/**
 * @todo Experimental...
 * @param {THREE.Object3D} object - A THREE Object3D instance
 */
Scene.showEdges = function(object) {
    const edgeMaterial = new THREE.MeshBasicMaterial({color: "#333"});
    if (object.isMesh) {
        let edges = new THREE.EdgesGeometry(object.geometry, 45);
        let line = new THREE.LineSegments(edges, edgeMaterial);
        object.add(line);

        console.log(object);
    }
    /*
    const rootUI = ATON.getRootUI();
    rootUI.traverse(object => APP.showEdges(object));
    */
}

Scene.changeLightDirection = function(x, y = -0.3, z = -0.7) {
    ATON.setMainLightDirection(new THREE.Vector3(x, y, z));
}

/**
 * @param {String} id - The settings button id
 */
Scene.toggleSettingsPanel = function(id) {
    const btn = document.querySelector(`#${id}`);
    const lightHeading = document.createElement('h2');
    lightHeading.className = 'fs-5 ms-2 mb-3 mt-3';
    lightHeading.innerHTML = '<i class="bi bi-lightbulb me-1"></i> Direzione luce';

    btn.addEventListener('click', () => {
        ATON.UI.showSidePanel({header: '<i class="bi bi-gear-fill me-1"></i> Impostazioni'});
        ATON.UI.elSidePanel.appendChild(lightHeading);

        const lightSliderX = ATON.UI.createSlider({
            range: [-2, 2],
            label: 'Asse X',
            value: 0,
            oninput: val => {
                const lightDir = ATON.getMainLightDirection();
                console.log(lightDir);
                // Keep existing Y and Z direction values
                this.changeLightDirection(val, lightDir.y, lightDir.z);
            },
        });
        const lightSliderY = ATON.UI.createSlider({
            range: [-2, 2],
            label: 'Asse Y',
            value: 0,
            oninput: val => {
                const lightDir = ATON.getMainLightDirection();
                console.log(lightDir);
                // Keep existing X and Z direction values
                this.changeLightDirection(lightDir.x, val, lightDir.z);
            },
        });
        const lightSliderZ = ATON.UI.createSlider({
            range: [-2, 2],
            label: 'Asse Z',
            value: 0,
            oninput: val => {
                const lightDir = ATON.getMainLightDirection();
                console.log(lightDir);
                // Keep existing X and Y direction values
                this.changeLightDirection(lightDir.x, lightDir.y, val);
            },
        });

        lightSliderX.classList.add('ms-4');
        lightSliderY.classList.add('ms-4');
        lightSliderZ.classList.add('ms-4');
        // Set step to 0.1 for the range input
        lightSliderX.querySelector('input').step = 0.1;
        lightSliderY.querySelector('input').step = 0.1;
        lightSliderZ.querySelector('input').step = 0.1;
        ATON.UI.elSidePanel.appendChild(lightSliderX);
        ATON.UI.elSidePanel.appendChild(lightSliderY);
        ATON.UI.elSidePanel.appendChild(lightSliderZ);
    });
}

Scene.init = function() {
    console.log("I'm initializing, baby!")
    ATON.realize();
    ATON.UI.addBasicEvents();
    ATON.UI.init();
    ATON.UI.setSidePanelLeft();
    // All assets for this app are stored here
    ATON.setPathCollection('./assets/');
    // Light direction should be dynamic / user-defined
    ATON.setMainLightDirection(new THREE.Vector3(0.2,-0.3,-0.7));

    ATON.toggleShadows(true);
    ATON.setExposure(1.3);
    // Open settings side panel when clicking on settings btn
    Scene.toggleSettingsPanel('settings');
}
/**
 * @param {String} id - The back-to-map button id
 */
Scene.toggleScene = function(id) {
    const btn = document.querySelector(`#${id}`);
    const scene = document.querySelector('#scene');

    btn.addEventListener('click', () => {
        scene.classList.toggle('d-none');
        document.querySelector('#map').classList.toggle('d-none');
    });
}
/**
 * @param {Object} marker - The marker object from config
 */
Scene.openScene = function(marker) {
    let canvas = document.querySelector('canvas');
    let scene = document.querySelector('#scene');

    if (canvas === null) {
        Scene.init();
    }

    scene.classList.toggle('d-none');
	// Load 3D model
	let mainNode = ATON.createSceneNode(marker.label).load(marker.model);
    ATON.setMainPanorama(marker.pano);
    mainNode.setMaterial(new THREE.MeshPhongMaterial(material));
    mainNode.setRotation(0, 1.5, 0)

    mainNode.attachToRoot();
}

export default Scene;