/** Handlers for events in datatables **/

var dtAddRowSelectionHandler = (tableId) => {
    $(tableId).on("draw.dt", (event) => {
        $(".chk-row-select").on("change", (event) => {
            var checkboxOrRadio = event.target;
            var tablerow = checkboxOrRadio.parentElement.parentElement;
            var tableclass = tablerow.getAttribute("class");
            if(checkboxOrRadio.checked) {
                if (checkboxOrRadio.type == "radio") {
                    $(tableId + " tr").each((index, row) => {
                        var rowKlass = $(row).attr("class") || "";
                        row.setAttribute(
                            "class", rowKlass.replaceAll("selected", "").trim());
                    });
                }
                tablerow.setAttribute("class", `${tableclass} selected`);
            }
            else {
                tablerow.setAttribute(
                    "class", tableclass.replaceAll("selected", "").trim());
            }
        });
    });
};


var toggleCheck = (checkboxOrRadio) => {
    if (checkboxOrRadio.length > 0) {
        var currentState = checkboxOrRadio.prop("checked");
        var newState = !currentState;
        if (currentState == true && checkboxOrRadio.attr("type").toLowerCase() == "radio") {
            // We don't want to toggle from true to false by clicking on the row
            // if it is a radio button.
            newState = currentState;
        }
        checkboxOrRadio.prop("checked", newState);
        checkboxOrRadio.trigger("change");
    }
};


var dtAddRowClickHandler = (tableId) => {
    $(tableId).on("draw.dt", (event) => {
        $(tableId + " tbody tr").on("click", (event) => {
            var row = event.target.closest("tr");
            var checkboxOrRadio = $(row).find(".chk-row-select");
            toggleCheck(checkboxOrRadio);
        });
    });
};


var dtAddCommonHandlers = (tableId) => {
    dtAddRowSelectionHandler(tableId);
    dtAddRowClickHandler(tableId);
};

var addTableLength = (menuList, lengthToAdd, dataLength) => {
    if(dataLength >= lengthToAdd) {
        newList = structuredClone(menuList);//menuList.slice(0, menuList.length); // shallow copy
        newList.push(lengthToAdd);
        return newList;
    }
    return menuList;
};

var defaultLengthMenu = (data) => {
    menuList = []
    var lengths = [10, 25, 50, 100, 1000, data.length];
    lengths.forEach((len) => {
        menuList = addTableLength(menuList, len, data.length);
    });
    return menuList;
};

var buildDataTable = (tableId, data = [], columns = [], userSettings = {}) => {
    var defaultSettings = {
        responsive: true,
        /* == Scroller settings == */
        scroller: true,
        paging: true, // MUST be true for scroller to work
        sDom: "iti",
        scrollY: "100vh",
        scrollCollapse: true,
        /* == END: Scroller settings == */
        lengthMenu: defaultLengthMenu(data),
        language: {
            processing: "Processing… Please wait.",
            loadingRecords: "Loading population — Please wait.",
            lengthMenu: "Show _MENU_ populations",
            info: "Showing _START_ to _END_ of _TOTAL_ populations"
        },
        data: data,
        columns: columns,
        drawCallback: (settings) => {
            $(this[0]).find("tbody tr").each((idx, row) => {
                var arow = $(row);
                var checkboxOrRadio = arow.find(".chk-row-select");
                if (checkboxOrRadio) {
                    if (arow.hasClass("selected")) {
                        checkboxOrRadio.prop("checked", true);
                    } else {
                        checkboxOrRadio.prop("checked", false);
                    }
                }
            });
        }
    }
    var theDataTable = $(tableId).DataTable({
        ...defaultSettings,
        ...userSettings
    });
    return theDataTable;
};