/**
 * @typedef {Object} BroadcastZone
 * @property {number} index
 * @property {string} description
 * @property {String} SoundChannel
 * @property {String} Box
 * @property {String} Relay
 */

/**
 * List of broadcast zones available
 * @type {BroadcastZone[]}
 */
let BroadcastZoneList = [];

/**
 * Currently selected broadcast zone row in the table
 * @type {JQuery<HTMLElement>|null}
 */
let selectedBroadcastZoneRow = null;

/**
 * Fill broadcast zone table body with values
 * @param {BroadcastZone[]} vv values to fill
 */
function fill_broadcastzonetablebody(vv) {
    $('#broadcastzonetablebody').empty();
    if (!Array.isArray(vv) || vv.length === 0) return;
    vv.forEach(item => {
        const row = `<tr>
            <td>${item.index}</td>
            <td>${item.description}</td>
            <td>${item.soundChannel}</td>
            <td>${item.box}</td>
            <td>${item.relay}</td>
        </tr>`;
        $('#broadcastzonetablebody').append(row);
        let $addedrow = $('#broadcastzonetablebody tr:last');
        $addedrow.click(function () {
            if (selectedBroadcastZoneRow) {
                selectedBroadcastZoneRow.find('td').css('background-color', '');
                if (selectedBroadcastZoneRow.is($(this))) {
                    selectedBroadcastZoneRow = null;
                    $('#btnRemove').prop('disabled', true);
                    $('#btnEdit').prop('disabled', true);
                    return;
                }
            }
            $(this).find('td').css('background-color', '#ffeeba');
            selectedBroadcastZoneRow = $(this);
            $('#btnRemove').prop('disabled', false);
            $('#btnEdit').prop('disabled', false);
        });
    });
    $('#tablesize').text("Table Size: " + vv.length);
}

/**
 * Reload broadcast zones from server
 * @param {String} APIURL API URL endpoint (default "BroadcastZones/")
 */
function reloadBroadcastZones(APIURL = "BroadcastZones/") {
    BroadcastZoneList = [];
    fetchAPI(APIURL + "List", "GET", {}, null, (okdata) => {
        if (Array.isArray(okdata)) {
            //console.log("reloadBroadcastZones : ", okdata)
            BroadcastZoneList = okdata;
            fill_broadcastzonetablebody(BroadcastZoneList);
        } else console.log("reloadBroadcastZones: okdata is not array");
    }, (errdata) => {
        alert("Error loading broadcast zones : " + errdata.message);
    });
}

$(document).ready(function () {
    console.log("broadcastzones.js loaded successfully");
    selectedBroadcastZoneRow = null;
    let $btnClear = $('#btnClear');
    let $btnAdd = $('#btnAdd');
    let $btnEdit = $('#btnEdit');
    let $btnRemove = $('#btnRemove');
    let $btnExport = $('#btnExport');
    let $btnImport = $('#btnImport');
    $btnEdit.prop('disabled', true);
    $btnRemove.prop('disabled', true);
    let APIURL_BroadcastZone = "BroadcastZones/";


    let $broadcastzonemodal = $('#broadcastzonemodal');
    let $broadcastzoneindex = $broadcastzonemodal.find('#broadcastzoneindex');
    let $broadcastzonedescription = $broadcastzonemodal.find('#broadcastzonedescription');
    let $broadcastzonesoundchannel = $broadcastzonemodal.find('#broadcastzonesoundchannel');
    let $broadcastzonebox = $broadcastzonemodal.find('#broadcastzonebox');

    

    let $findzone = $('#findzone');
    $findzone.on('input', function () {
        let searchTerm = $findzone.val().trim().toLowerCase();
        if (searchTerm.length > 0) {
            selectedBroadcastZoneRow = null;
            let filtered = broadcastzonedata.filter(item => item.description.toLowerCase().includes(searchTerm) || item.box.toLowerCase().includes(searchTerm) || item.soundChannel.toLowerCase().includes(searchTerm) || item.relay.toLowerCase().includes(searchTerm));
            fill_broadcastzonetablebody(filtered);
        } else {
            selectedBroadcastZoneRow = null;
            fill_broadcastzonetablebody(broadcastzonedata);
        }
    });

    /**
     * Find Checkbox for relays 1 to 32
     * Checkbox id is 01 to 32 with leading zero for 1 to 9
     * @param {number} id 1 - 32 
     * @returns JQuery<HTMLElement>
     */
    function cbRelay(id) {
        return $broadcastzonemodal.find('#R' + (id < 10 ? '0' : '') + id);
    }

    /**
     * Clear broadcast zone modal to default state
     */
    function clearBroadcastZoneModal() {
        $broadcastzoneindex.prop('disabled', true).val('');
        $broadcastzonedescription.val('');
        $broadcastzonesoundchannel.val('');
        $broadcastzonebox.val('');
        for (let i = 1; i <= 32; i++) {
            cbRelay(i).prop('checked', false);
        }
    }

    reloadBroadcastZones(APIURL_BroadcastZone);

    $btnClear.click(() => {
        DoClear(APIURL_BroadcastZone, "BroadcastZones", (okdata) => {
            reloadBroadcastZones(APIURL_BroadcastZone);
            alert("Success clear broadcast zones: " + okdata.message);
        }, (errdata) => {
            alert("Error clear broadcast zones: " + errdata.message);
        });
    });

    $btnAdd.click(() => {
        $broadcastzonemodal.modal('show');
        clearBroadcastZoneModal();

        $broadcastzonemodal.off('click.broadcastzonesave').on('click.broadcastzonesave', '#broadcastzonesave', function () {

            let description = $broadcastzonedescription.val().trim();
            let soundChannel = $broadcastzonesoundchannel.val().trim();
            let box = $broadcastzonebox.val().trim();
            let relayArray = [];
            for (let i = 1; i <= 32; i++) {
                if (cbRelay(i).is(':checked')) {
                    relayArray.push(i);
                }
            }
            let relay = relayArray.join(';');
            if (description.length === 0) {
                alert("Description cannot be empty");
                return;
            }
            if (soundChannel.length === 0) {
                alert("Sound Channel cannot be empty");
                return;
            }
            if (box.length === 0) {
                alert("Box cannot be empty");
                return;
            }
            if (relayArray.length === 0) {
                alert("At least one relay must be selected");
                return;
            }
            let bz = {
                description: description,
                SoundChannel: soundChannel,
                Box: box,
                Relay: relay
            };
            fetchAPI(APIURL_BroadcastZone + "Add", "POST", bz, null, (okdata) => {
                reloadBroadcastZones(APIURL_BroadcastZone);
                alert("Success add new broadcast zone: " + okdata.message);
            }, (errdata) => {
                alert("Error add new broadcast zone: " + errdata.message);
            });

            $broadcastzonemodal.modal('hide');
        });
        $broadcastzonemodal.off('click.broadcastzoneclose').on('click.broadcastzoneclose', '#broadcastzoneclose', function () {
            $broadcastzonemodal.modal('hide');
        });
    });

    $btnRemove.click(() => {
        if (selectedBroadcastZoneRow) {
            let cells = selectedBroadcastZoneRow.find('td');
            /** @type {BroadcastZone} */
            let bz = {
                index: cells.eq(0).text(),
                description: cells.eq(1).text(),
                SoundChannel: cells.eq(2).text(),
                Box: cells.eq(3).text(),
                Relay: cells.eq(4).text()
            };
            if (confirm(`Are you sure to delete broadcast zone [${bz.index}] Description=${bz.description}?`)) {
                fetchAPI(APIURL_BroadcastZone + "DeleteByIndex/" + bz.index, "DELETE", {}, null, (okdata) => {
                    reloadBroadcastZones(APIURL_BroadcastZone);
                    alert("Success delete broadcast zone: " + okdata.message);
                }, (errdata) => {
                    alert("Error delete broadcast zone: " + errdata.message);
                });
            }
        }
    });

    $btnEdit.click(() => {
        if (selectedBroadcastZoneRow) {
            let cells = selectedBroadcastZoneRow.find('td');
            /** @type {BroadcastZone} */
            let bz = {
                index: cells.eq(0).text(),
                description: cells.eq(1).text(),
                SoundChannel: cells.eq(2).text(),
                Box: cells.eq(3).text(),
                Relay: cells.eq(4).text()
            };
            if (confirm(`Are you sure to edit broadcast zone [${bz.index}] Description=${bz.description} SoundChannel=${bz.SoundChannel} Box=${bz.Box} Relay=${bz.Relay}?`)) {
                $broadcastzonemodal.modal('show');
                clearBroadcastZoneModal();
                $broadcastzoneindex.val(bz.index);
                $broadcastzonedescription.val(bz.description);
                $broadcastzonesoundchannel.val(bz.SoundChannel);
                $broadcastzonebox.val(bz.Box);
                if (bz.Relay) {
                    bz.Relay.split(';').forEach(relayId => {
                        let id = parseInt(relayId, 10);
                        cbRelay(id).prop('checked', true);
                    });
                }
                $broadcastzonemodal.off('click.broadcastzonesave').on('click.broadcastzonesave', '#broadcastzonesave', function () {
                    let description = $broadcastzonedescription.val().trim();
                    let soundChannel = $broadcastzonesoundchannel.val().trim();
                    let box = $broadcastzonebox.val().trim();
                    let relayArray = [];
                    for (let i = 1; i <= 32; i++) {
                        if (cbRelay(i).is(':checked')) {
                            relayArray.push(i);
                        }
                    }
                    let relay = relayArray.join(';');
                    if (description.length === 0) {
                        alert("Description cannot be empty");
                        return;
                    }
                    if (soundChannel.length === 0) {
                        alert("Sound Channel cannot be empty");
                        return;
                    }
                    if (box.length === 0) {
                        alert("Box cannot be empty");
                        return;
                    }
                    if (relayArray.length === 0) {
                        alert("At least one relay must be selected");
                        return;
                    }
                    let bzUpdate = {
                        description: description,
                        SoundChannel: soundChannel,
                        Box: box,
                        Relay: relay
                    };
                    fetchAPI(APIURL_BroadcastZone + "UpdateByIndex/" + bz.index, "PATCH", bzUpdate, null, (okdata) => {
                        reloadBroadcastZones(APIURL_BroadcastZone);
                        alert("Success edit broadcast zone: " + okdata.message);
                    }, (errdata) => {
                        alert("Error edit broadcast zone: " + errdata.message);
                    });
                    $broadcastzonemodal.modal('hide');
                });
                $broadcastzonemodal.off('click.broadcastzoneclose').on('click.broadcastzoneclose', '#broadcastzoneclose', function () {
                    $broadcastzonemodal.modal('hide');
                });
            }
        }
    });

    $btnExport.click(() => {
        DoExport(APIURL_BroadcastZone, "broadcastzones.xlsx", {});
    });

    $btnImport.click(() => {
        DoImport(APIURL_BroadcastZone, (okdata) => {
            reloadBroadcastZones(APIURL_BroadcastZone);
            alert("Success import broadcast zones: " + okdata.message);
        }, (errdata) => {
            alert("Error importing broadcast zones from XLSX: " + errdata.message);
        });
    });
});