/**
 * @author Usman Naeem
 */
var watch_list_name_map = new Map();
var opened_edit_watch_list_record_id = -1;
var opened_delete_watch_list_record_id = -1;

function enableWatchListPage() {
    addLoader();
    setPage("watch_list_page");
    addHeader(true);
    addFooter();
    const messageboxElement = getElement("watch_list_message_box");
    messageboxElement.innerHTML = "";
    opened_edit_watch_list_record_id = -1;
    opened_delete_watch_list_record_id = -1;

    //
    load_user().then(() => {
        load_watch_list(messageboxElement).then(() => {
            removeLoader();
            load_watch_list_div_list();
        }).catch(error => {
            handleError(error, "watch_list_message_box", true);
            return;
        });
    }).catch(error => {
        handleError(error, "watch_list_message_box", true);
        enableLoginPage();
        return;
    });
}

async function load_watch_list(messageboxElement) {
    try {
        const url = "GetSnapshotWatchListRecords";
        const json = await callWebserviceGET(url, messageboxElement, null);
        if (json.code !== 200) {
            if (messageboxElement) {
                messageboxElement.innerHTML = json.message;
            }
        } else {
            await set_watch_list(json.user_snapshot_watch_list_records);
        }
    } catch (error) {
        console.log(error);
        throw new Error("Failed to load watch list");
    }
}

function set_watch_list(watch_list_json) {
    watch_list_name_map.clear();
    const watchListMap = new Map();
    watch_list_json.forEach(record => {
        if (!watch_list_name_map.has(record.name)) {
            watch_list_name_map.set(record.name, record);
        }
    });
}

function load_watch_list_div_list() {
    watch_list_name_map = new Map([...watch_list_name_map.entries()].sort(function (a, b) {
        return a[0].toLowerCase().localeCompare(b[0].toLowerCase());
    }));
    const watchListDivContainer = getElement("watch_list_div_container");
    watchListDivContainer.innerHTML = "";
    if (!watch_list_name_map || watch_list_name_map.size === 0) {
        watchListDivContainer.innerHTML = "<div class='watch_list_empty'>Your don't have anyting in your watch list</div>";
        return;
    }

    watch_list_name_map.forEach(function (watchListRecord, name) {
        add_watch_list_record_div(watchListDivContainer, watchListRecord);
    });
}

function findRecordById(id) {
    var watchListRecordOfId = null;
    watch_list_name_map.forEach(function (watchListRecord, name) {
        if (Number(watchListRecord.id) === Number(id)) {
            watchListRecordOfId = watchListRecord;
        }
    });
    return watchListRecordOfId;
}

function add_watch_list_record_div(watchListDivContainer, watchListRecord) {
    var reloadDelayInfo = "OFF";
    if (watchListRecord.reload_delay > 0) {
        var minutes = Math.floor(watchListRecord.reload_delay / 60000);
        var seconds = ((watchListRecord.reload_delay % 60000) / 1000).toFixed(0);
        reloadDelayInfo = minutes + ":" + (seconds < 10 ? '0' : '') + seconds;
    }
    const frameId = "frm_" + watchListRecord.id;
    var recordDiv = "<div class='watch_list_div_title' style='pointer-events: auto;'>";
    recordDiv += watchListRecord.name;
    recordDiv += "</div>";
    recordDiv += "<div class='watch_list_div' style='pointer-events: auto;'>";
    recordDiv += "<span class='watch_list_detail_name'>Periodic Update:</span><span class='watch_list_detail_value " + (reloadDelayInfo !== "OFF" ? "watch_list_detail_reload_on_value" : "watch_list_detail_reload_off_value") + "'>" + reloadDelayInfo + "</span>";
    recordDiv += "<div class='vgap2x'></div>";
    recordDiv += "<span class='watch_list_detail_name'></span>";
    recordDiv += "<div class='vgap'></div>";
    recordDiv += "<div class='watch_list_detail_value watch_list_detail_desc_value'>" + (watchListRecord.description ? "<iframe id='" + frameId + "' class='watch_list_detail_frame' onload='set_description_frame(\"" + frameId + "\");'></iframe>" : "Description is not provided") + "</div>";
    recordDiv += "<div class='watch_list_actions'>";
    recordDiv += "<div class='watch_list_action'>";
    recordDiv += "<button type='button' class='aeatas_button swl_delete_btn' onclick='openDeleteWatchListBox(" + watchListRecord.id + ");' id='watchlist_delete_button'><span class='aeatas_button_label swl_delete_lbl' id='watchlist_delete_button_lbl'>Delete</span><span class='aeatas_button_icon swl_delete_icon' id='watchlist_delete_button_icon'>X</span></button>";
    recordDiv += "</div>";
    recordDiv += "<div class='watch_list_action'>";
    recordDiv += "<button type='button' class='aeatas_button swl_edit_btn' onclick='openEditWatchListBox(" + watchListRecord.id + ");' id='watchlist_edit_button'><span class='aeatas_button_label swl_edit_lbl' id='watchlist_edit_button_lbl'>Setting</span><span class='aeatas_button_icon swl_edit_icon' id='watchlist_edit_button_icon'>&#9998;</span></button>";
    recordDiv += "</div>";
    recordDiv += "<div class='watch_list_action'>";
    recordDiv += "<button type='button' class='aeatas_button swl_launch_btn' onclick='launchWatchListRecord(" + watchListRecord.id + ", " + watchListRecord.reload_delay + ");'><span class='aeatas_button_label swl_launch_lbl'>Launch</span><span class='aeatas_button_icon swl_launch_icon'><img width='12' height='12' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==' /></span></button>";
    recordDiv += "</div>";
    recordDiv += "</div>";

    //
    recordDiv += "</div>";

    //
    recordDiv += "<div id='watchlist_edit_div_" + watchListRecord.id + "' class='watchlist_edit_div'>";
    recordDiv += "</div>";

    //
    recordDiv += "<div id='watchlist_delete_div_" + watchListRecord.id + "' class='watchlist_delete_div'>";
    recordDiv += "</div>";

    watchListDivContainer.innerHTML += recordDiv;
    if (watchListRecord.description) {
        const description_frame = getElement(frameId);
        description_frame.srcdoc = watchListRecord.description;

    }
}
function set_description_frame(id) {
    const description_frame = getElement(id);
    const new_style_element = document.createElement("style");
    new_style_element.textContent = "body { font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-style: italic; color: #777; text-align: left; line-heith: 10px; text-decoration: none;}";
    description_frame.contentDocument.head.appendChild(new_style_element);
    description_frame.contentWindow.document.body.style.padding = "0px";
    description_frame.contentWindow.document.body.style.margin = "0px";
    description_frame.contentWindow.document.body.style.top = "0";
    description_frame.contentWindow.document.body.style.left = "0";
    description_frame.width = "100%";
    description_frame.height = description_frame.contentWindow.document.body.offsetHeight;
    description_frame.style.width = "100%";
    description_frame.style.height = description_frame.contentWindow.document.body.offsetHeight + "px";
}
function closeWatchListBoxes() {
    closeEditWatchListBox(true);
    closeDeleteWatchListBox(true);
}
function openDeleteWatchListBox(id) {
    closeWatchListBoxes();
    var watchListRecordOfId = findRecordById(id);
    if (!watchListRecordOfId) {
        return;
    }
    opened_delete_watch_list_record_id = id;
    var recordDiv = "<div id='watchlist_delete_box' class='watchlist_delete_box'>";
    recordDiv += "<input type='hidden' id='watchlist_record_id' name='watchlist_record_id' value='" + watchListRecordOfId.id + "'>";
    recordDiv += "<div id='watchlist_delete_confirm_label'class='watchlist_delete_confirm'>Confirm Deletion</div>";
    recordDiv += "<div class='vgap4x'></div>";
    recordDiv += "<div id='watchlist_delete_name_label'class='watchlist_delete_label'>" + escapeCharacters(watchListRecordOfId.name) + "</div>";
    recordDiv += "<div class='vgap3x'></div>";
    recordDiv += "<div id='watchlist_delete_message_box' class='messagebox'></div>";
    recordDiv += "<button id='cancle_watchlist_delete_btn' class='watchlist_delete_btn' type='button' onClick='closeDeleteWatchListBox();'>Cancel</button>";
    recordDiv += "<button id='watchlist_delete_btn' class='watchlist_delete_btn' type='button' onClick='deleteWatchListRecord();'>Delete</button>";
    recordDiv += "</div>";

    const watchlist_delete_div = getElement("watchlist_delete_div_" + watchListRecordOfId.id);
    watchlist_delete_div.innerHTML = recordDiv;
    watchlist_delete_div.style.display = 'block';

}

function closeDeleteWatchListBox(explicit) {
    if (opened_delete_watch_list_record_id !== -1) {
        const id = event && event.target ? event.target.id : null;
        if (explicit === true || !id || !id.startsWith("watchlist_")) {
            const watchlist_delete_div = getElement("watchlist_delete_div_" + opened_delete_watch_list_record_id);
            watchlist_delete_div.innerHTML = "";
            watchlist_delete_div.style.display = 'none';
            opened_delete_watch_list_record_id = -1;
        }
    }
}

function openEditWatchListBox(id) {
    closeWatchListBoxes();
    var watchListRecordOfId = findRecordById(id);
    if (!watchListRecordOfId) {
        return;
    }
    opened_edit_watch_list_record_id = watchListRecordOfId.id;
    var recordDiv = "<div id='watchlist_edit_box' class='watchlist_edit_box'>";
    recordDiv += "<input type='hidden' id='watchlist_record_id' name='watchlist_record_id' value='" + watchListRecordOfId.id + "'>";
    recordDiv += "<label id='watchlist_edit_name_label' for='watchlist_record_name' class='watchlist_edit_label'>Name</label>";
    recordDiv += "<input type='text' placeholder='Enter Name (required)' id='watchlist_record_name' name='watchlist_record_name' value='" + escapeCharacters(watchListRecordOfId.name) + "' autocomplete='off' maxlength='40' onkeypress='if (event.keyCode === 13) {saveWatchList(); return false;}'>";
    recordDiv += "<label id='watchlist_edit_description_label' for='watchlist_record_description' class='watchlist_edit_label'>Description</label>";
    recordDiv += "<input type='text' placeholder='Enter Description (optional)' id='watchlist_record_description' name='watchlist_record_description' value='" + (watchListRecordOfId.description ? escapeCharacters(watchListRecordOfId.description) : "") + "' autocomplete='off' maxlength='500' onkeypress='if (event.keyCode === 13) {saveWatchList(); return false;}'>";
    recordDiv += "<label id='watchlist_edit_reload_delay_label' for='watchlist_record_reload_delay' class='watchlist_edit_label'>Periodic Update</label>";
    recordDiv += "<select id='watchlist_record_reload_delay'>";
    recordDiv += "</select>";
    recordDiv += "<div id='watchlist_edit_message_box' class='messagebox'></div>";
    recordDiv += "<button id='cancle_watchlist_btn' class='watchlist_edit_btn' type='button' onClick='closeEditWatchListBox();'>Cancel</button>";
    recordDiv += "<button id='watchlist_save_btn' class='watchlist_edit_btn' type='button' onClick='saveWatchList();'>Save</button>";
    recordDiv += "</div>";

    const watchlist_edit_div = getElement("watchlist_edit_div_" + watchListRecordOfId.id);
    watchlist_edit_div.innerHTML = recordDiv;
    watchlist_edit_div.style.display = 'block';

    load_snapshot_reload_delay_element("watchlist_record_reload_delay", watchListRecordOfId.reload_delay);

    const watch_list_record_name = getElement('watchlist_record_name');
    watch_list_record_name.focus();
}

function closeEditWatchListBox(explicit) {
    if (opened_edit_watch_list_record_id !== -1) {
        const id = event && event.target ? event.target.id : null;
        if (explicit === true || !id || !id.startsWith("watchlist_")) {
            const watchlist_edit_div = getElement("watchlist_edit_div_" + opened_edit_watch_list_record_id);
            watchlist_edit_div.innerHTML = "";
            watchlist_edit_div.style.display = 'none';
            opened_edit_watch_list_record_id = -1;
        }
    }
}

async function saveWatchList() {
    try {
        const watchListMessageboxElement = getElement("watchlist_edit_message_box");
        watchListMessageboxElement.innerHTML = "";

        const watchListRecordNameElement = getElement("watchlist_record_name");
        const watchListRecordName = watchListRecordNameElement.value.trim();
        if (watchListRecordName === '') {
            watchListMessageboxElement.innerHTML = "Name of watch list entry is required";
            return;
        }

        const watchListRecordIdElement = getElement("watchlist_record_id");
        const watchListRecordId = watchListRecordIdElement.value.trim();
        if (watchListRecordId === '' || watchListRecordId < 1) {
            watchListMessageboxElement.innerHTML = "Id of watch list entry is required";
            return;
        }

        const watchListRecordDescriptionElement = getElement("watchlist_record_description");
        const watchListRecordDescription = watchListRecordDescriptionElement.value ? watchListRecordDescriptionElement.value.trim() : "";

        const watchListRecordReloadDelayElement = getElement("watchlist_record_reload_delay");
        const watchListRecordReloadDelay = Number(watchListRecordReloadDelayElement.value);

        var wait_text = "Please Wait";
        const buttonElement = getElement("watchlist_save_btn");
        if (buttonElement.textContent === wait_text) {
            return;
        }

        var watchListRecordToUpdate = findRecordById(watchListRecordId);
        if (!watchListRecordToUpdate) {
            return;
        }
        if (watchListRecordName === watchListRecordToUpdate.name && watchListRecordDescription === watchListRecordToUpdate.description && watchListRecordReloadDelay === watchListRecordToUpdate.reload_delay) {
            watchListMessageboxElement.innerHTML = "Nothing to save";
            return;
        }


        const buttonText = buttonElement.textContent;
        buttonElement.textContent = wait_text;

        const formData = getFormData(home_form_id);
        const url = "EditSnapshotWatchListRecord?id=" + watchListRecordId + "&name=" + encodeURIComponent(watchListRecordName) + "&description=" + encodeURIComponent(watchListRecordDescription) + "&reload_delay=" + watchListRecordReloadDelay;
        await callWebserviceGET(url, watchListMessageboxElement, null).then((json) => {
            buttonElement.textContent = buttonText;
            if (json) {
                if (json.code !== 200) {
                    watchListMessageboxElement.innerHTML = getErrorMessage(json.message);
                } else {
                    closeEditWatchListBox(true);
                    var watchListRecordToUpdate = null;
                    watch_list_name_map.forEach(function (watchListRecord, name) {
                        if (Number(watchListRecord.id) === Number(watchListRecordId)) {
                            watchListRecordToUpdate = watchListRecord;
                        }
                    });
                    if (watchListRecordToUpdate) {
                        watch_list_name_map.delete(watchListRecordToUpdate.name);
                        watchListRecordToUpdate.name = watchListRecordName;
                        watchListRecordToUpdate.description = watchListRecordDescription;
                        watchListRecordToUpdate.reload_delay = watchListRecordReloadDelay;
                        watch_list_name_map.set(watchListRecordToUpdate.name, watchListRecordToUpdate);
                        load_watch_list_div_list();
                    }


                    const messageboxElement = getElement("watch_list_message_box");
                    messageboxElement.innerHTML = "Watch list updated";
                    sleep(2000).then(() => {
                        messageboxElement.innerHTML = "";
                    });
                }
            }
        }).catch((error) => {
            disableOrEnableForm(home_form_id, false);
            buttonElement.textContent = buttonText;
            handleError("Failed to edit watch list " + error, "watch_list_message_box", false);
            console.log(error);
        });
    } catch (error) {
        console.log(error);
        handleError("Failed to edit watch list " + error, "watch_list_message_box", false);
    }
}

async function deleteWatchListRecord() {
    try {
        const watchListMessageboxElement = getElement("watchlist_delete_message_box");
        watchListMessageboxElement.innerHTML = "";

        const watchListRecordIdElement = getElement("watchlist_record_id");
        const watchListRecordId = watchListRecordIdElement.value.trim();
        if (watchListRecordId === '' || watchListRecordId < 1) {
            watchListMessageboxElement.innerHTML = "Id of watch list entry is required";
            return;
        }

        var wait_text = "Please Wait";
        const buttonElement = getElement("watchlist_delete_btn");
        if (buttonElement.textContent === wait_text) {
            return;
        }

        const buttonText = buttonElement.textContent;
        buttonElement.textContent = wait_text;

        const formData = getFormData(home_form_id);
        const url = "RemoveSnapshotWatchListRecord?id=" + watchListRecordId;
        await callWebserviceGET(url, watchListMessageboxElement, null).then((json) => {
            buttonElement.textContent = buttonText;
            if (json) {
                if (json.code !== 200) {
                    watchListMessageboxElement.innerHTML = getErrorMessage(json.message);
                } else {
                    closeDeleteWatchListBox(true);
                    var watchListRecordToRemove = null;
                    watch_list_name_map.forEach(function (watchListRecord, name) {
                        if (Number(watchListRecord.id) === Number(watchListRecordId)) {
                            watchListRecordToRemove = watchListRecord;
                        }
                    });
                    if (watchListRecordToRemove) {
                        watch_list_name_map.delete(watchListRecordToRemove.name);
                        load_watch_list_div_list();
                    }


                    const messageboxElement = getElement("watch_list_message_box");
                    messageboxElement.innerHTML = "Watch list updated";
                    sleep(2000).then(() => {
                        messageboxElement.innerHTML = "";
                    });
                }
            }
        }).catch((error) => {
            disableOrEnableForm(home_form_id, false);
            buttonElement.textContent = buttonText;
            handleError("Failed to delete watch list " + error, "watch_list_message_box", false);
            console.log(error);
        });
    } catch (error) {
        console.log(error);
        handleError("Failed to delete watch list " + error, "watch_list_message_box", false);
    }
}

async function launchWatchListRecord(watch_list_record_id, reloadDelay) {
    try {
        const messageboxElement = getElement("watch_list_message_box");
        const snapshotWindow = openSnapshotWindow();
        if (snapshotWindow && !snapshotWindow.closed) {
            const closeSnapshotWindow = closeSnapshotWindowFunction(snapshotWindow);

            await take_snapshot_of_watch_list_record(snapshotWindow, watch_list_record_id, messageboxElement, closeSnapshotWindow, false).then(() => {
                if (snapshotWindow && !snapshotWindow.closed) {
                    if (reloadDelay > 1000) {
                        var startTime = Number(Date.now());
                        var nextReload = startTime + Number(reloadDelay);
                        var reloadCheckDelay = 1000;
                        var takingSnapshot = false;

                        const reloader = window.setInterval(function () {
                            if (snapshotWindow.closed) {
                                clearInterval(reloader);
                                return;
                            }
                            if (!takingSnapshot) {
                                if (nextReload < Date.now()) {
                                    if (!takingSnapshot) {
                                        takingSnapshot = true;
                                        take_snapshot_of_watch_list_record(snapshotWindow, watch_list_record_id, null, null, true).then(() => {
                                            startTime = Number(Date.now());
                                            nextReload = startTime + Number(reloadDelay);
                                            takingSnapshot = false;
                                        });
                                    }
                                }
                            }
                        }, reloadCheckDelay);

                        if (include_time_elapsed_in_title || include_reload_time_in_title) {
                            var title = snapshotWindow.document.title;
                            const titler = window.setInterval(function () {
                                if (snapshotWindow.closed) {
                                    clearInterval(titler);
                                    return;
                                }
                                var remaining;
                                if (include_reload_time_in_title) {
                                    var remainingTime = (include_time_elapsed_in_title ? nextReload - startTime : nextReload - Number(Date.now()));
                                    if (remainingTime < 0) {
                                        remainingTime = 0;
                                    }
                                    var minutes = Math.floor(remainingTime / 60000);
                                    var seconds = ((remainingTime % 60000) / 1000).toFixed(0);
                                    remaining = " [" + minutes + ":" + (seconds < 10 ? '0' : '') + seconds + "] ";
                                }
                                var timePssed;
                                if (include_time_elapsed_in_title) {
                                    const timeElapsed = Number(Date.now() - startTime);
                                    minutes = Math.floor(timeElapsed / 60000);
                                    seconds = ((timeElapsed % 60000) / 1000).toFixed(0);
                                    timePssed = " [" + minutes + ":" + (seconds < 10 ? '0' : '') + seconds + "] ";
                                }
                                snapshotWindow.document.title = title + (timePssed ? timePssed : "") + (remaining ? (timePssed ? "/" : "") + remaining : "");
                            }, 1000);
                        }
                    } else {
                        if (include_time_elapsed_in_title) {
                            var title = snapshotWindow.document.title;
                            const startTime = Number(Date.now());
                            const titler = window.setInterval(function () {
                                if (snapshotWindow.closed) {
                                    clearInterval(titler);
                                    return;
                                }
                                const timeElapsed = Number(Date.now() - startTime);
                                var minutes = Math.floor(timeElapsed / 60000);
                                var seconds = ((timeElapsed % 60000) / 1000).toFixed(0);
                                const timePassed = " [" + minutes + ":" + (seconds < 10 ? '0' : '') + seconds + "]";
                                snapshotWindow.document.title = title + timePassed;
                            }, 1000);
                        }
                    }
                }
            });
        } else {
            messageboxElement.innerHTML = "Failed to open snapshot popup";
        }
    } catch (error) {
        console.log(error);
        handleError("Failed to take snapshot " + error, "watch_list_message_box", false);
    }
}


async function take_snapshot_of_watch_list_record(snapshot_window, watch_list_record_id, messagebox_element, close_snapshot_window, reloading) {
    if (snapshot_window.closed) {
        return;
    }
    if (!reloading || clear_snapshot_before_reload) {
        snapshot_window.document.body.innerHTML = createSnapshotAltContent(snapshot_wait_content);
    }
    const url = "TakeSnapshotOfWatchListRecord?id=" + watch_list_record_id;
    await callWebserviceGET(url, messagebox_element, close_snapshot_window).then((json) => {
        if (json) {
            if (json.code !== 200) {
                if (!reloading) {
                    messagebox_element.innerHTML = getErrorMessage(json.message);
                }
                if (snapshot_window && !snapshot_window.closed) {
                    snapshot_window.close();
                }
            } else {
                if (!reloading) {
                    messagebox_element.innerHTML = "";
                }
                if (snapshot_window && !snapshot_window.closed) {
                    if (!reloading) {
                        snapshot_window.focus();
                    }
                    const snapshots = json.snapshots;
                    setSnapshots(snapshot_window, snapshots, "watch_list_message_box");
                }
            }
        }
    }).catch((error) => {
        if (!reloading) {
            if (!snapshot_window.closed) {
                try {
                    snapshot_window.close();
                } catch (error) {
                }
            }
            if (!reloading) {
                handleError("Failed to launch snapshot for watch list record  " + error, "watch_list_message_box", false);
            }
        } else {
            if (!snapshot_window.closed) {
                snapshot_window.document.body.innerHTML = createSnapshotAltContent(error);
            }
        }
        console.log(error);
    });
}