if (typeof settings == 'undefined') { let settings = {}; }
if (typeof site == 'undefined') { let site = {}; }
if (typeof curr_defs == 'undefined') { let curr_defs = {}; }
const define_settings = () => {
    settings = Object.freeze({
        now: new Date(),
        elements: {
            themeToggle: {
                DarkIcon: document.getElementById('theme-toggle-dark-icon'),
                
                LightIcon: document.getElementById('theme-toggle-light-icon'),
                Btn: document.getElementById('theme-toggle'),
            },
            loading: document.getElementById('loadding-section'),
        },
        l_store_key: 'defs',
        toast_copy_timeout: 2000,
        alert_timeout: 3000,
    });
    curr_defs = {};
    site = {
        on_color_theme: (color_theme) => {
            const elem = document.getElementsByTagName('html')[0];
            if (color_theme == 'dark') {
                utils.css("hide", settings.elements.themeToggle.DarkIcon);
                utils.css("show", settings.elements.themeToggle.LightIcon);
                if (!elem.classList.contains('dark')) {
                   elem.classList.add('dark');
                }
            } else {
                utils.css("show", settings.elements.themeToggle.DarkIcon);
                utils.css("hide", settings.elements.themeToggle.LightIcon);
                if (elem.classList.contains('dark')) {
                   elem.classList.remove('dark');
                }
            }
        },
        on_loading: (task) => {
            if (settings.elements.loading) {
                utils.css(task, settings.elements.loading);
            }
        }
    };
}
window.addEventListener('load', () => {
    define_settings();
    const str_curenv = localStorage.getItem(settings.l_store_key);
    if (str_curenv != '') {
        try {
            data= JSON.parse(str_curenv);
        } catch (error) {
           console.log(error);
        }
        if (data) { curr_defs = data};
    } else { curr_defs = {}; }
    let color_theme = 'light';
    if (tpl_defs && tpl_defs.main && tpl_defs.main.color_theme != '') {
        color_theme = tpl_defs.main.color_theme;
    } else if (curr_defs && curr_defs.theme) {
        color_theme = curr_defs.theme;
    }
    if (settings.elements.themeToggle.Btn) {
        site.on_color_theme(color_theme);
        settings.elements.themeToggle.Btn.addEventListener('click', (ev) => {
            ev.preventDefault();
            const elem = document.getElementsByTagName('html')[0];
            const next_theme = elem.classList.contains('dark') ? 'light' : 'dark';
            if (tpl_defs && tpl_defs.curr_env) {
                tpl_defs.curr_env.color_theme = next_theme;
            }
            if (curr_defs) {
                curr_defs.theme=next_theme;
                localStorage.setItem(settings.l_store_key, JSON.stringify(curr_defs));
            }
            site.on_color_theme(next_theme);
            if (tpl_defs.main.has_role) { utils.update_session(data); }
        });
    }
    // this is key to hide theme changes before page display
    document.body.classList.remove('hidden');
});