{{ define "ndiMatrix" }}
<script src="/static/js/autocompleteCellEditor.js"></script>
<script src="/static/js/statusRenderer.js"></script>
<script charset="utf-8" type="text/javascript">


    const ndiSourceColumnDefs = [
        {field: "channelId", colId: "id", hide: true},
        {field: "nameId", hide: true},
        {field: "channelName", headerName: "NDI Channel", suppressMovable: true, filter: true, filterParams: multiFilterCondition, editable: false, comparator: naturalSort},
        {field: "name", headerName: "NDI Source Name", suppressMovable: true, filter: true, filterParams: multiFilterCondition, editable: true, comparator: naturalSort, cellEditor: AutocompleteCellEditor, cellEditorParams: {clearFunc: autocompleteClearFunction, searchFunc: autocompleteSearchFunction, assignFunc: autocompleteAssignFunction}},
        {field: "status", suppressMovable: true, minWidth: 80, cellRenderer: StatusRenderer, cellStyle: {padding: 0}},
        {field: "severity", suppressMovable: true, hide: true},
    ];

    const ndiDestColumnDefs = [
        {field: "channelId", colId: "id", hide: true},
        {field: "nameId", hide: true},
        {field: "channelName", headerName: "NDI Channel", suppressMovable: true, filter: true, filterParams: multiFilterCondition, editable: false, comparator: naturalSort},
        {field: "name", headerName: "NDI Destination Name", suppressMovable: true, filter: true, filterParams: multiFilterCondition, editable: true, comparator: naturalSort},
    ];

    const ndiSourceGridOptions = {
        defaultColDef: {
            resizable: true,
            sortable: true,
            flex: 1,
        },
        columnDefs: ndiSourceColumnDefs,
        suppressMenuHide: true,
        suppressDragLeaveHidesColumns: true,
        headerHeight: 36,
        rowHeight: 31,
        rowSelection: 'multiple',
        onCellValueChanged: onNdiCellValueChanged,
        stopEditingWhenCellsLoseFocus: true,
        onSelectionChanged: onNdiSourceSelectionChanged,
    };

    const ndiDestGridOptions = {
        defaultColDef: {
            resizable: true,
            sortable: true,
            flex: 1,
        },
        columnDefs: ndiDestColumnDefs,
        suppressMenuHide: true,
        suppressDragLeaveHidesColumns: true,
        headerHeight: 36,
        rowHeight: 31,
        rowSelection: 'multiple',
        onCellValueChanged: onNdiCellValueChanged,
        stopEditingWhenCellsLoseFocus: true,
        onSelectionChanged: onNdiDestinationSelectionChanged,
    };

    function onNdiCellValueChanged(event) {
        switch (event.column.colId) {
            case "name":
                if (event.newValue) {
                    event.newValue.trim();
                }
                if (!validateString(event.newValue)) {
                    displayErrorDialog(NameErrorMessage);
                    return;
                }
        }
        let postArgs = $.extend( true, {}, event.data);
        postArgs["channelId"] = event.data["channelId"];
        postArgs["nameId"] = event.data["nameId"];
        $.post("/ndi/update", postArgs).done();
    }

    function onNdiSourceSelectionChanged() {
        const selectedRows = ndiSourceGridOptions.api.getSelectedRows();
        if (selectedRows.length > 0) {
            enableUiButton("ndiSourceDeselect");
            enableUiButton("ndiSourceClear");
        } else {
            disableUiButton("ndiSourceDeselect");
            disableUiButton("ndiSourceClear");
        }
    }

    function onNdiDestinationSelectionChanged() {
        const selectedRows = ndiDestGridOptions.api.getSelectedRows();
        if (selectedRows.length > 0) {
            enableUiButton("ndiDestDeselect");
            enableUiButton("ndiDestClear");
        } else {
            disableUiButton("ndiDestDeselect");
            disableUiButton("ndiDestClear");
        }
    }

    function updateNDIDiscoveryServer(discoveryServers) {
        let sanitizedIP = discoveryServers.replace(/,/g, "\n")
        let discoverServerList = sanitizedIP.split("\n").filter(ip => ip);
        for (let i=0; i<discoverServerList.length; i++) {
            if (!validateIp(discoverServerList[i])) {
                displayErrorDialog(discoverServerList[i] + " is not a valid IP address.");
                return;
            }
        }
        removeAllOptions("#DiscoveryServer");
        let select = document.getElementById("DiscoveryServer");
        for (let i=0; i<discoverServerList.length; i++) {
            let option = document.createElement('option');
            option.value = discoverServerList[i];
            option.innerHTML = discoverServerList[i];
            select.appendChild(option);
        }
        handleIPConnectionPointChanged();
        $.ajax({url: "/ndi/saveDiscoveryServerList?servers=" + discoveryServers,
            success: () => {
                hideDialog("LoadingModal");
            },
            error: (err) => {
                displayErrorDialog(err.responseText || JSON.stringify(err));
            }
		});
        hideDialog("updateDiscoveryServerModal");
    }

    function showUpdateDiscoveryServerModal() {
        displayDialog('updateDiscoveryServerModal');
        let discoveryserver = "";
        let discoveryserverList = document.getElementById("DiscoveryServer");
        for (let i=0; i<discoveryserverList.options.length; i++) {
            discoveryserver += discoveryserverList.options[i].value + "\n";
        }
        document.getElementById("updateNdiDiscServer").value = discoveryserver;
    }

    function loadNDIMatrixWindow(deviceId) {
        fetch('/ndi/settings?deviceId=' + deviceId)
            .then((response) => response.json())
            .then((data) => {
                removeAllOptions("#DiscoveryServer");
                let select = document.getElementById("DiscoveryServer");
                for (let i=0; i < data.discoveryserver.length; i++) {
                    let option = new Option(data.discoveryserver[i], data.discoveryserver[i]);
                    select.add(option, undefined);
                }
                document.getElementById("groupName").value = data.group;
                document.getElementById("ndiSrcCount").value = data.maxinputs;
                document.getElementById("ndiDstCount").value = data.maxoutputs;
            });
        updateNdiSources()
        getDiscoveryServerStatus()
    }

    function clearNDI(gridOptions){
        let selectedRows = gridOptions.api.getSelectedRows();
        let ids = [];
        for (let i=0; i<selectedRows.length; i++) {
            if (selectedRows[i].nameId > 0) {
                ids.push(selectedRows[i].nameId);
            }
        }
        $.ajax({url: "/ndi/delete?ids=" + ids,
            success: () => {
                hideDialog("LoadingModal");
            },
            error: (err) => {
                displayErrorDialog(err.responseText || JSON.stringify(err));
            }
		});
    }

    function refreshNdiChannels() {
        let ndiSrcTab = document.getElementById("ndi-source-tab")
        if (ndiSrcTab.classList.contains('active')) {
            updateNdiSources()
        } else {
            updateNdiDestinations()
        }
    }

    function updateNdiSources() {
        fetch('/ndi/list?direction=in')
            .then((response) => response.json())
            .then((data) => {
                ndiSourceGridOptions.api.setRowData(data);
            }).then(() => {
                updateNdiSourceStatuses();
            });
    }

    function updateNdiDestinations() {
        fetch('/ndi/list?direction=out')
            .then((response) => response.json())
            .then((data) => {
                ndiDestGridOptions.api.setRowData(data);
            });
    }

    function updateNdiSourceStatuses() {
        console.log('updateNdiSourceStatuses' );
        $.ajax({
            url: "/ndi/ndiDiscoveredSources",
            success: (result) => {
                ndiSourceGridOptions.api.forEachNode((node) => {
                    node.data.status = "Offline";
                    node.data.severity = 3;
                    if (result != null && result != undefined) {
                        result.forEach(option => {
                            if (node.data.name === option) {
                                node.data.status = "Online";
                                node.data.severity = 0;
                            }
                        });
                    }
                    
                });
                ndiSourceGridOptions.api.redrawRows();
            }
        });
    }

    // autocompleteSearchFunction() implements the function for getting options to display in the dropdown. It returns a list of items
    // and calls the createOption function in autocompleteCellEditor.js for each one.
    function autocompleteSearchFunction(searchString, dropdownInstance) {
        $.ajax({
            url: "/ndi/ndiDiscoveredSources",
            success: (result) => {
                while (dropdownInstance.dropdownContainer.firstChild) {
                    dropdownInstance.dropdownContainer.removeChild(dropdownInstance.dropdownContainer.firstChild);
                }
                result.forEach(option => {
                    dropdownInstance.createOption(option, option, dropdownInstance);
                });
            }
        });
    }

    // autocompleteAssignFunction() implements the behaviour used by autocompleteCellEditor when the user types in the field and presses enter, or
    // clicks on an option in the dropdown.
    function autocompleteAssignFunction(option) {
        let postArgs = {};
        postArgs["channelId"] = ndiSourceGridOptions.api.getSelectedRows()[0].channelId;
        postArgs["nameId"] = ndiSourceGridOptions.api.getSelectedRows()[0].nameId;
        if (option.id) {
            postArgs["name"] = option.id;
        } else {
            postArgs["name"] = option;
        }
        $.post("/ndi/update", postArgs).done();
    }

    // autocompleteClearFunction() implements the behaviour for when the user removes all text from the dropdown field and presses enter
    function autocompleteClearFunction() {
        clearNDI(ndiSourceGridOptions);
    }

    function getNDIDiscoveredSources() {
        fetch('/ndi/ndiDiscoveredSources')
            .then((response) => response.json())
            .then((data) => {
            console.log("DOMContentLoaded - got data", data);
        });
    }

    function ndiDiscoveryServerControl() {
        start = +$('#ndi_discovery_enable').is(':checked');
        $.ajax({url: "/ndi/ndiDiscoveryServerCtl?start=" + start,
            success: () => {
                hideDialog("LoadingModal");
            },
            error: (err) => {
                displayErrorDialog(err.responseText || JSON.stringify(err));
            }
        });
    }

    function getDiscoveryServerStatus() {
    $.ajax({url: "/ndi/ndiDiscoveryServerStatus",
        success: (result) => {
            $('#ndi_discovery_enable').prop('checked', result);
        },
        error: (err) => {
            displayErrorDialog(err.responseText || JSON.stringify(err));
        }
    });
    }

</script>

<table class="container-data">
    <tr class="row-data">
        <td class="col-data-label col-175">NDI discovery server</td>
        <td class="col-data-input ip-address-size">
            <select class="form-control rounded-0 form-control-textarea ip-address-size ndi-ip-address" id="DiscoveryServer" multiple name="Discovery Server" readonly></select>
        </td>
    </tr>
    <tr class="row-data">
        <td class="col-data-label col-175"/>
        <td class="col-data-label ip-address-size">
            <button class="btn btn-nav-icon-text" id="addButton" onclick="showUpdateDiscoveryServerModal();" style="float:right">Edit</button>
        </td>
    </tr>
    <tr class="row-separator"></tr>
    <tr class="row-data">
        <td class="col-data-label col-175">NDI group</td>
        <td class="col-data-input ip-address-size"><input class="form-control rounded-0 ip-address-size" id="groupName" name="groupName" onchange="handleIPConnectionPointChanged()" value="Test"></td>
    </tr>
    <tr class="row-data">
        <td class="col-data-label col-175">Source count</td>
        <td class="col-data-input ip-address-size"><span class="number-wrapper"><input class="form-control rounded-0 number-size" id="ndiSrcCount" max="1000" min="1" name="ndiSrcCount" onchange="handleIPConnectionPointChanged()" oninput="restrictNumberField(this)" type="number"></span></td>
    </tr>
    <tr class="row-data">
        <td class="col-data-label col-175">Destination count</td>
        <td class="col-data-input ip-address-size"><span class="number-wrapper"><input class="form-control rounded-0 number-size" id="ndiDstCount" max="1000" min="1" name="ndiDstCount" onchange="handleIPConnectionPointChanged()" oninput="restrictNumberField(this)" type="number"></span></td>
    </tr>
    <tr class="row-data">
        <td class="col-data-label col-175">Enable local discovery server</td>
        <td class="col-data-input ip-address-size"><input id="ndi_discovery_enable" class="form-check-input" type="checkbox" name="ndiDiscoveryEnable" onchange="ndiDiscoveryServerControl()"></td>
    </tr>    
</table>

<div class="col tab" id="tabs">
    <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button onclick="updateNdiSources();" aria-controls="ndi-source-tab" aria-selected="true" class="tablinks tab-button active" data-bs-target="#ndiSources" data-bs-toggle="tab" id="ndi-source-tab" role="tab" type="button">NDI Sources</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="tab-separator" hidden id="matrixTabSeparator" role="tab" type="button"><i class="icon-tab-separator"></i></button>
        </li>
        <li class="nav-item" role="presentation">
            <button onclick="updateNdiDestinations();" aria-controls="ndi-dest-tab" aria-selected="false" class="tablinks tab-button" data-bs-target="#ndiDestinations" data-bs-toggle="tab" id="ndi-dest-tab" role="tab" type="button">NDI Destinations</button>
        </li>
    </ul>
</div>

<div class="tab-content" id="ndiTabContent" style="height:55%">
    <div aria-labelledby="ndi-source-tab" class="tab-pane show active " id="ndiSources" role="tabpanel" style="height:85%">
        <nav class="navbar navbar-expand-lg" id="ndiSourceToolbar">
        <span aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation" class=" btn btn-nav-icon-text navbar-toggler" data-bs-target="#navbarToggler" data-bs-toggle="collapse" role="button">
        <i class="icon-menu"></i>Menu
        </span>
            <div class="collapse navbar-collapse" id="ndiSourceNavbarToggler">
                <ul class="navbar-nav me-auto mb-lg-0">
                    <li>
                        <button class="btn btn-nav-icon" id="ndiSourceSelectButton" onclick="ndiSourceGridOptions.api.selectAllFiltered();"><i class="icon-select-rows" id="ndiSourceSelectImg"></i></button>
                    </li>
                    <li>
                        <button class="btn btn-nav-icon" disabled id="ndiSourceDeselectButton" onclick="ndiSourceGridOptions.api.deselectAll();"><i class="icon-deselect-rows-disabled" id="ndiSourceDeselectImg"></i></button>
                    </li>
                    <li>
                        <button class="btn btn-nav-icon" disabled id="ndiSourceClearButton" onclick="displayConfirmationDialog('Are you sure you would like to clear the selected NDI source names?', 'Apply', 'clearNDI(ndiSourceGridOptions);')"><i class="icon-clear-disabled" id="ndiSourceClearImg"></i></button>
                    </li>
                </ul>
            </div>
        </nav>
        <div class="grid-wrapper-devices" id="ndiSourceTable" style="height: 100%">
            <div class="ag-theme-balham-dark" id="ndiSourceGrid" style="height: 100%;"></div>
        </div>
    </div>
    <div aria-labelledby="ndi-dest-tab" class="tab-pane show " id="ndiDestinations" role="tabpanel" style="height:85%">
        <nav class="navbar navbar-expand-lg" id="ndiDestToolbar">
        <span aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation" class=" btn btn-nav-icon-text navbar-toggler" data-bs-target="#navbarToggler" data-bs-toggle="collapse" role="button">
        <i class="icon-menu"></i>Menu
        </span>
            <div class="collapse navbar-collapse" id="ndiDestNavbarToggler">
                <ul class="navbar-nav me-auto mb-lg-0">
                    <li>
                        <button class="btn btn-nav-icon" id="ndiDestSelectButton" onclick="ndiDestGridOptions.api.selectAllFiltered();"><i class="icon-select-rows" id="ndiDestSelectImg"></i></button>
                    </li>
                    <li>
                        <button class="btn btn-nav-icon" disabled id="ndiDestDeselectButton" onclick="ndiDestGridOptions.api.deselectAll();"><i class="icon-deselect-rows-disabled" id="ndiDestDeselectImg"></i></button>
                    </li>
                    <li>
                        <button class="btn btn-nav-icon" disabled id="ndiDestClearButton" onclick="displayConfirmationDialog('Are you sure you would like to clear the selected NDI destination names?', 'Apply', 'clearNDI(ndiDestGridOptions);')"><i class="icon-clear-disabled" id="ndiDestClearImg"></i></button>
                    </li>
                </ul>
            </div>
        </nav>
        <div class="grid-wrapper-devices" id="ndiDestTable" style="height: 100%">
            <div class="ag-theme-balham-dark" id="ndiDestGrid" style="height: 100%;"></div>
        </div>
    </div>
</div>

<div aria-hidden="true" aria-labelledby="updateDiscoveryServerModal" class="modal" data-bs-backdrop="static" data-bs-keyboard="false" id="updateDiscoveryServerModal" role="dialog"tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-update-ndi">
        <div class="modal-content">
            <div class="modal-header">
                <span class="modal-title" id="addSourceModalLabel"><i class="icon-edit icon-white"></i>Update Discovery Server(s)</span>
                <span class="btn btn-transparent" onclick="hideDialog('updateDiscoveryServerModal');"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body">
                <table class="container-data">
                    <tr class="row-data">
                        <td class="col-data-label col-150">NDI discovery server</td>
                        <td class="col-data-input col-150"><textarea class="form-control rounded-0 ndi-ip-address form-control-textarea" id="updateNdiDiscServer" name="updateNdiDiscServer" rows="5" tabindex="0"></textarea></td>
                    </tr>
                </table>
                <div class="modal-footer justify-content-between">
                    <button class="btn btn-text btn-outline-secondary" onclick="hideDialog('updateDiscoveryServerModal');" tabindex="5">Cancel</button>
                    <button class="btn btn-text" onclick="updateNDIDiscoveryServer(document.getElementById('updateNdiDiscServer').value)" tabindex="4">Apply</button>
                </div>
            </div>
        </div>
    </div>
</div>
{{ end }}