/**
 * @author Usman Naeem
 */
function enablePreferredTimeframesPage() {
    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;
    });
}

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

    timeframesMap.forEach(function (timeframeObj, id) {
        const preferred = preferred_timeframe_name_map.has(id);
        add_preferred_timeframe_div(id, timeframeObj.name, timeframeObj.active, preferred);
    });
}

function add_preferred_timeframe_div(id, name, active, preferred) {
    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 ? "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>";

    const preferred_timeframes_div_container = getElement("preferred_timeframes_div_container");
    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 {
            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';
}