/**
 * @author Usman Naeem
 */
function enablePreferredTimeframesPage() {
    try {
        addLoader();
        setPage(preferred_timeframes_page);
        addHeader(true);
        addFooter();
        const messageboxElement = getElement("preferred_timeframes_message_box");
        messageboxElement.innerHTML = "";

        //
        load_user(messageboxElement).then(() => {
            load_timeframes(false).then(() => {
                load_preferred_timeframes(messageboxElement).then(() => {
                    removeLoader();
                    load_preferred_timeframe_div_list();
                }).catch(error => {
                    handleError(error, "preferred_timeframes_message_box", true);
                    return;
                });
            }).catch(error => {
                handleError(error, "preferred_timeframes_message_box", true);
                return;
            });
        }).catch(error => {
            handleError(error, "preferred_timeframes_message_box", true);
            enableLoginPage();
            return;
        });
    } catch (error) {
        handleError(error, "preferred_timeframes_message_box", true);
        removeLoader();
    }
}

function load_preferred_timeframe_div_list() {
    const preferredDivContainer = getElement("preferred_timeframes_div_container");
    preferredDivContainer.innerHTML = "";

    var timeframesMap = new Map([...timeframe_name_map.entries()].sort(function (a, b) {
        return a - b;
    }));
    //
    const preferred_timeframes_div_container = getElement("preferred_timeframes_div_container");
    preferred_timeframes_div_container.style.transformOrigin = "top left";
    preferred_timeframes_div_container.animate([
        {opacity: 0, transform: 'scale(1)'},
        {opacity: 1, transform: 'scale(1)'}
    ], {duration: 400, easing: 'ease-in-out'});
    //
    timeframesMap.forEach(function (timeframeObj, id) {
        const preferred = preferred_timeframe_name_map.has(id);
        add_preferred_timeframe_div(id, timeframeObj.name, timeframeObj.active, preferred, preferred_timeframes_div_container);
    });
}

function add_preferred_timeframe_div(id, name, active, preferred, preferred_timeframes_div_container) {
    var preferredDiv = "<div class='preferred_div' style='pointer-events: auto;' id='preferred_timeframe_div_" + id + "' onClick='javascript:changeTimeframePreferrerence(" + id + ");'>";
    preferredDiv += "<span class='preferred_label'>" + name + "</span>";
    preferredDiv += "<span class='preferred_info" + (active ? " preferred_info_highlight" : "") +"' style='padding-left: 20px;'>" + (active ? "active" : "inactive") + "</span>";
    preferredDiv += "<span class='preferred_checkbox_label' id='checkbox_label_" + id + "'>" + (preferred ? "&#x2713;" : "&nbsp;") + "</span>";
    preferredDiv += "<input type='checkbox' class='preferred_checkbox' name='" + id + "' id='checkbox_" + id + "'" + (preferred ? " checked='checked'" : "") + ">";
    preferredDiv += "</div>";

    preferred_timeframes_div_container.innerHTML += preferredDiv;
}

async function changeTimeframePreferrerence(id) {
    const messageboxElement = getElement("preferred_timeframes_message_box");
    messageboxElement.innerHTML = "";
    const preferredDivElement = getElement("preferred_timeframe_div_" + id);
    preferredDivElement.style.pointerEvents = 'none';
    try {
        const checkboxElement = getElement("checkbox_" + id);
        const newPreference = !checkboxElement.checked;

        var url;
        if (newPreference) {
            url = "AddUserTimeframePreference?timeframe_id=" + id;
        } else {
            url = "RemoveUserTimeframePreference?timeframe_id=" + id;
        }
        const json = await callWebserviceGET(url, messageboxElement, null);
        if (json.code !== 200) {
            messageboxElement.innerHTML = json.message;
        } else {
            preferred_timeframe_cashe_expiry_time = 0;
            homepage_cashe_expiry_time = 0;
            const checkboxLabelElement = getElement("checkbox_label_" + id);
            checkboxLabelElement.innerHTML = (newPreference ? "&#x2713;" : "&nbsp;");
            checkboxElement.checked = newPreference;
        }
    } catch (error) {
        console.log(error);
        messageboxElement.innerHTML = "Failed to change preferrence";
    }
    preferredDivElement.style.pointerEvents = 'auto';
}