import Map from "./map.js";
/*
	Main js entry for ATON web-app

===============================================*/
// Realize our app
let APP = ATON.App.realize();

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

APP.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);
    }
}

/**
 * @param {String} id - The settings button id
 */
APP.toggleSettingsPanel = function(id) {
    const btn = document.querySelector(`#${id}`);

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

/**
 * @param {String} id - The back-to-map button id
 */
APP.toggleScene = function(id) {
    const btn = document.querySelector(`#${id}`);
    const scene = document.querySelector('canvas');

    btn.addEventListener('click', () => {
        scene.classList.toggle('d-none');
        document.querySelector('#map').classList.toggle('d-none');
        Map.init('map');
    });
}

// You can require here flares (plugins) if needed by the app
//APP.requireFlares(["myFlare","anotherFlare"]);

// APP.setup() is required for web-app initialization
// You can place here UI setup (HTML), events handling, etc.
APP.setup = ()=>{

	// Realize base ATON and add base UI events
    ATON.realize();
    ATON.UI.addBasicEvents();
    ATON.UI.init();
    ATON.UI.setSidePanelLeft();

    // Open settings side panel when clicking on btn
    APP.toggleSettingsPanel('settings');
    APP.toggleScene('back');

    // 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));

    const rootUI = ATON.getRootUI();
    rootUI.traverse(object => APP.showEdges(object));

	// Load 3D model
	let mainNode = ATON.createSceneNode("teatro").load("teatro_san_salvador_20250926.gltf");
    // Panorama should be configurable and / or user-defined
    const pano = "defsky-grass.jpg";
    ATON.setMainPanorama(pano);
    mainNode.setMaterial(new THREE.MeshPhongMaterial(material));
    mainNode.setRotation(0, 1.5, 0)

    //showEdges(mainNode.children[0]);
    mainNode.attachToRoot();

    ATON.toggleShadows(true);
    ATON.setExposure(1.3);
    
    // If our app required ore or more flares (plugins), we can also wait for them to be ready for specific setups
    ATON.on("AllFlaresReady",()=>{
		// Do stuff
		console.log("All flares ready");
	});
};

/* If you plan to use an update routine (executed continuously), you can place its logic here.
APP.update = ()=>{

};
*/