/**
 * @typedef {Object} UserDB
 * @property {number} index Index number
 * @property {string} username Username
 * @property {string} password Password (plain)
 * @property {string} location Location
 * @property {string} soundbank_tags Soundbank variable tags separated by semicolon ;
 * @property {string} messagebank_ann_id Messagebank announcement ID separated by semicolon ;
 * @property {string} broadcastzones Broadcast zones separated by semicolon ;
 */

/** List of UserDB data loaded from server
 * @type {UserDB[]}
 */
window.userdb = [];

/**
 * Currently selected user row in table
 * @type {JQuery<HTMLElement>|null}
 */
window.selecteduserrow = null;

/**
 * Fill user table body with values
 * @param {UserDB[]} vv values to fill
 */
function fill_usertablebody(vv) {
    $('#usertablebody').empty();
    
    if (!Array.isArray(vv) || vv.length === 0) {
        $('#btnExport').prop('disabled', true);
        return;
    }
    vv.forEach(item => {
        const row = `<tr>
                     <td>${item.index}</td>
                     <td>${item.datenya}</td>
                     <td>${item.timenya}</td>
                     <td>${item.machine}</td>
                     <td>${item.description}</td>
                     </tr>`;
        $('#usertablebody').append(row);
        let $addedrow = $('#usertablebody tr:last');
        $addedrow.on('click', function () {
            if (window.selecteduserrow) {
                window.selecteduserrow.find('td').css('background-color', '');
                if (window.selecteduserrow.is($(this))) {
                    window.selecteduserrow = null;
                    $('#btnRemove').prop('disabled', true);
                    $('#btnEdit').prop('disabled', true);
                    return;
                }
            }
            $(this).find('td').css('background-color', '#ffeeba');
            window.selecteduserrow = $(this);
            $('#btnRemove').prop('disabled', false);
            $('#btnEdit').prop('disabled', false);
        });
    });
    $('#tablesize').text("Table Size: " + vv.length);
    $('#btnExport').prop('disabled', false);
}

/**
 * Reload UserDB from server with date and filter
 * @param {String} APIURL API URL endpoint , default "User/"
 */
function reloaduserDB(APIURL = "User/") {
    window.userdb = [];
    fetchAPI(APIURL + "List", "GET", {}, null, (okdata) => {
        if (Array.isArray(okdata)) {
            window.userdb.push(...okdata);
            fill_usertablebody(window.userdb);
        }
    }, (errdata) => {
        alert("Error loading user database : " + errdata.message);
    });
}

$(document).ready(function () {
    console.log("usermanagement.js ready");
    let $usertablebody = $('#usertablebody');
    let $finduser = $('#finduser');
    let $btnClear = $('#btnClear');
    let $btnAdd = $('#btnAdd');
    let $btnRemove = $('#btnRemove');
    let $btnEdit = $('#btnEdit');
    let $btnExport = $('#btnExport');
    let $btnImport = $('#btnImport');
    let APIURL = "User/";

    // add / edit modal elements
    let $addmodal = $('#addmodal');
    let $modalindex = $('#modalindex');
    let $modalusername = $('#modalusername');
    let $modalpassword = $('#modalpassword');
    let $modalverifypassword = $('#modalverifypassword');
    let $modalsoundbank = $('#modalsoundbank');
    let $modalmessagebank = $('#modalmessagebank');
    let $modalbroadcastzones = $('#modalbroadcastzones');
    let $btnShowSoundbankModal = $('#btnShowSoundbankModal');
    let $btnShowMessagebankModal = $('#btnShowMessagebankModal');
    let $btnShowBroaadcastZoneModal = $('#btnShowBroaadcastZoneModal');
    let $usermanagementsave = $('#usermanagementsave');
    let $usermanagementclose = $('#usermanagementclose');
    
    // soundbank selection modal elements
    let $soundbankmodal = $('#soundbankmodal');
    let $soundbankselection = $('#soundbankselection');
    let $soundbankselectionsave = $('#soundbankselectionsave');
    let $soundbankselectionclose = $('#soundbankselectionclose');
    
    // broadcast zone selection modal elements
    let $broadcastzonemodal = $('#broadcastzonemodal');
    let $broadcastzoneselection = $('#broadcastzoneselection');
    let $broadcastzoneselectionsave = $('#broadcastzoneselectionsave');
    let $broadcastzoneselectionclose = $('#broadcastzoneselectionclose');
    
    // messagebank selection modal elements
    let $messagebankmodal = $('#messagebankmodal');
    let $messagebankselection = $('#messagebankselection');
    let $messagebankselectionsave = $('#messagebankselectionsave');
    let $messagebankselectionclose = $('#messagebankselectionclose');

    $usertablebody.empty();
    $finduser.on('input', function () {
    });
});