//environment variables will be fetched from server
let env = {'thing': 123}; // Default value until loaded

//the application config. default values here which can be overridden by user's local storage
let cfgDefault = {};
let cfg = cfgDefault;

//some placeholder values here. some ideas for placeholder values here. might all be useful
let dom = {
    input: {},
    label: {},
    box: {}, //an info-containing box
    icon: {},
    info: {}
};

// application state
// (WebSocket is managed by visualizer.js)


//APP START HERE
$(document).ready(async function() {
    console.log(window.env);
    // 1. setup relationship with DOM and grab references to its elements
    log('init DOM');
    await initDOM();

    // 2. grab any local user config
    log('init cfg');
    await initCfg();

    // 3. communicate with any external services if needed, like REST API
    log('init services');
    await initServices();

    // 4. now that we have the proper env/config, the DOM is prepared, and we've setup connection to services,
    //    we can initialize the app models and start the app
    initApp();
});

//gets user config from local storage if there is any
function initCfg(){
    let localCfg = localStorage.getItem('config');
    if (localCfg) {
        try {
            cfg = JSON.parse(localCfg);
        } catch (e) {
            console.warn('local config is malformed. using default application config');
        }
    } else {
        console.log('No local config. using default.');
    }
}


function initServices(){
    // Load environment variables from a server
    return fetch('/api/env')
        .then(response => {
            if (response.status == 200){
                return response.json()
            } else {
                return null;
            }
        })
        .then(data => {
            env = data;
            console.log('Environment loaded:', env);
            return data;
        })
        .catch(error => {
            console.error('Error loading environment:', error);
            return env; // Return default
        });
}

function initDOM(){
    dom.body = $('body')[0];
    dom.serverStatus = document.getElementById('server-status');
}

function initApp(){
    log('App initialized');
}

function log(msg, lvl=1){
    if (dom.debugInfo){
        dom.debugInfo.innerHTML = msg; //TODO running log + timestamp
    }
    console.log(msg);
}