{{ define "widgetcontent" }}
<div id="widgetsGrid" style="width: 100%; height: 220px;" class="ag-theme-balham-dark">
</div>

<script type="text/javascript" charset="utf-8">
    let products = [];
    let currWidget = 1;
    let currWidgetName = "";

    const WidgetColumnDefs = [
        {field: "WidgetID", checkboxSelection: false},
        {valueGetter: getProductNameText, editable: false, headerName: "Product"},
        {field: "WidgetName", editable: false},
        {field: "ControlType", editable: false},
        {field: "ControlSubType", editable: false},
        {field: "NumControls", editable: false},
    ];

    const WidgetGridOptions = {
        defaultColDef: {
            resizable: true,
            sortable: true,
            editable: true,
            filter: true,
        },
        columnDefs: WidgetColumnDefs,
        domLayout: 'normal',
        headerHeight: 36,
        rowHeight: 31,
        rowSelection: 'single',
        enableRangeSelection: true,
        pagination: true,
        paginationAutoPageSize: true,
        getRowNodeId: (data) => { return data.WidgetID; },
        onRowClicked: onWidgetRowSelected,
    };

    let widgetGridDiv = document.querySelector('#widgetsGrid');

    //init table datasource once DOM content is loaded
    document.addEventListener('DOMContentLoaded', async function () {
        products = await getProductsDB();
        new agGrid.Grid(widgetGridDiv, WidgetGridOptions);
    });

    function loadWidgetGrid(product, isEditing) {
        let id = {"ProductID": product};
        $.post("/widget/byproduct", id, (data) => {
            data = parseWidgetDataArray(data);   // might need this for numchannels
            WidgetGridOptions.api.setRowData(data)
            if (isEditing) {    // page is being edited, selected the added or updated widget
                let node = WidgetGridOptions.api.getRowNode(currWidget);
                node.setSelected(true);
            } else {  // widget data is a reload
                if (data != null) {
                    currWidget = data[0].WidgetID;
                    currWidgetName = data[0].WidgetName;
                    let node = WidgetGridOptions.api.getRowNode(currWidget);
                    node.setSelected(true);
                } else {
                    currWidget = 0;
                    currWidgetName = "";
                }
            }
            loadParameterGrid(currWidget, false);
        });
    }

    function onWidgetRowSelected(event) {
        currWidget = event.data.WidgetID;
        currWidgetName = event.data.WidgetName;
        loadParameterGrid(currWidget, false);
    }

    function onWidgetFilterTextBoxChanged() {
        WidgetGridOptions.api.setQuickFilter(document.getElementById('widgetFilterInput').value);
    }

    function addWidget() {
        const formData = {
            "ProductID": getCurrProduct(),
            "WidgetName": document.getElementById('AddWidgetName').value,
            "ControlType": document.getElementById('AddControlType').value,
            "ControlSubType": document.getElementById('AddControlSubType').value,
            "NumControls": document.getElementById('AddNumControls').value
        };
        $.post("/widget/post", formData, (data) => {
            currWidget = data.WidgetID;
            currWidgetName = data.WidgetName;
            loadWidgetGrid(getCurrProduct(), true);
            WidgetGridOptions.api.paginationGoToLastPage();    // should always arrive on the page that the new entry is on and selected
        });
    }

    function updateWidget() {
        const formData = {
            "WidgetID": currWidget,
            "ProductID": getCurrProduct(),
            "WidgetName": ocument.getElementById('UpdateWidgetName').value,
            "ControlType": document.getElementById('UpdateControlType').value,
            "ControlSubType": document.getElementById('UpdateControlSubType').value,
            "NumControls": document.getElementById('UpdateNumControls').value
        };
        $.post("/widget/update", formData, () => {
            loadWidgetGrid(getCurrProduct(), true);
        });
        document.getElementById("widgetUpdateClose").click();
    }

    function deleteWidget() {
        const selectedData = WidgetGridOptions.api.getSelectedRows();
        selectedData.forEach(node => {
            let id = {"WidgetID": node.WidgetID};
            $.post("/widget/remove", id, () => {
                loadWidgetGrid(getCurrProduct(), false);
                WidgetGridOptions.api.paginationGoToFirstPage();    // arrive on the first page after a delete with first widget selected
            });
        });
        document.getElementById("widgetDeleteClose").click();
    }

    function parseWidgetDataArray(parray) {
        if (parray) {
            let resp = [];
            for (let i = 0; i < parray.length; i++) {
                resp.push(parseWidgetDataItem(parray[i]));
            }
            return resp;
        } else {
            return null;
        }
    }

    function parseWidgetDataItem(data) {
        let resp = {
            "WidgetID": data.WidgetID,
            "ProductID": data.ProductID,
            "WidgetName": data.WidgetName,
            "ControlType": data.ControlType,
            "ControlSubType": data.ControlSubType,
            "NumControls": 0
        };
        if (data.NumControls != undefined) {
            resp.NumControls = data.NumControls;
        }
        return resp;
    }

    async function onFillUpdateWidgetModal() {
        const selectedData = WidgetGridOptions.api.getSelectedRows();
        document.getElementById("UpdateWidgetName").value = selectedData[0].WidgetName;
        document.getElementById("UpdateControlType").value = selectedData[0].ControlType;
        document.getElementById("UpdateControlSubType").value = selectedData[0].ControlSubType;
        document.getElementById("UpdateNumControls").value = selectedData[0].NumControls;
        document.querySelector('#updateWidgetButton').addEventListener('click', function (event) {
            event.preventDefault();
            $('#updateWidgetModal').modal('hide');
        });
    }

    async function onFillAddWidgetModal() {
        document.getElementById("AddWidgetName").value = "";
        document.getElementById("AddControlType").value = "";
        document.getElementById("AddControlSubType").value = "";
        document.getElementById("AddNumControls").value = 0;
        document.querySelector('#addWidgetButton').addEventListener('click', function (event) {
            event.preventDefault();
            $('#addWidgetModal').modal('hide');
        });
    }

    async function onFillDeleteWidgetModal() {
        //in the use case of the device page the modal dialog presents all the available devices in the system using a pull down of the name
        document.getElementById("DeleteWidgetName").value = currWidgetName;
        document.querySelector('#deleteWidgetButton').addEventListener('click', function (event) {
            event.preventDefault();
            $('#deleteWidgetModal').modal('hide');
        });
        document.querySelector('#cancelWidgetButton').addEventListener('click', function (event) {
            event.preventDefault();
            $('#deleteWidgetModal').modal('hide');
        });
    }

    function onImportWidgetFromGrid(isEditing) {
        let input = document.createElement('input');
        input.type = 'file';
        input.onchange = _this => {
            let files = Array.from(input.files);
            widgetname = importWidgetFromGrid(files);
            if(isEditing) {
                document.getElementById("UpdateWidgetName").value = widgetname;
            } else {
                document.getElementById("AddWidgetName").value = widgetname;
            }
        };
        input.click();
    }

    function importWidgetFromGrid(fileInput) {
        // have seen full path in filename on some browsers need to split on / or \ and take the last element to get just the filename
        let file = fileInput[0];
        // have seen full path in filename on some browsers need to split on / or \ and take the last element to get just the filename
        let filename = file.name.split("/").slice(-1);
        filename = filename.toString().split("\\").slice(-1);
        let widgetname = filename.toString().split(".")[0];

        let formData = new FormData();
        formData.append('file', file);
        formData.append('DataType', "WidgetGrid");
        formData.append('WidgetName', widgetname);
        $.ajax({
            url: '/widget/import',
            type: 'POST',
            async: true,
            data: formData,
            processData: false,
            contentType: false,
            success: function(r) {},
            error: function(r) {},
            timeout: 60000
        });
        return widgetname;
    }

    function getProductNameText(params) {
        for (var i = 0; i < products.length; i++) {
            if (products[i].ProductID == params.data.ProductID) {
                return products[i].Name;
            }
        }
    }

    async function getProductsDB() {
        let types = await fetch("/product/agdata");
        let data = await types.json()
        return data;
    }
</script>

<!--Add Widgets modal-->
<div class="modal" id="addWidgetModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="addWidgetModalLabel"aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" style="width: max-content;">
        <div class="modal-content">
            <div class="modal-header justify-content-between">
                <span class="modal-title" id="addWidgetModalLabel"><i class="icon-add icon-white"></i>Add Widget</span>
                <span class="btn btn-transparent" data-bs-dismiss="modal"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body">
                <table style="margin: 20px;">
                    <tr class="row-data">
                        <td class="col-data-label">Enter Widget Name:</td>
                        <td class="col-data-input"><input class="form-control rounded-0 nameSize" name="WidgetName" id="AddWidgetName"></input></td>
                    </tr>
                    <tr class="row-data">
                        <td class="col-data-label">Enter Control Type:</td>
                        <td class="col-data-input">
                            <input class="form-control rounded-0 ipAddressSize" name="ControlType" id="AddControlType"></input>
                        </td>
                    </tr>
                    <tr class="row-data">
                        <td class="col-data-label">Sub-Control Type:</td>
                        <td class="col-data-input"><
                            input class="form-control rounded-0 ipAddressSize" name="ControlSubType" id="AddControlSubType"></input>
                        </td>
                    </tr>
                    <tr class="row-data">
                        <td class="col-data-label">Number of Controls:</td>
                        <td class="col-data-input">
                            <input class="form-control rounded-0 countSize" name="NumControls" id="AddNumControls"></input>
                        </td>
                    </tr>
                </table>
                <div class="modal-footer justify-content-between">
                    <button class="btn btn-text btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <div>
                        <button class="btn btn-nav-icon-text" onclick="onImportWidgetFromGrid(false);" data-bs-toggle="modal" ><i class="icon-import"></i>Import Grid</button>
                        <button class="btn btn-text" onclick="addWidget();">Apply</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--Update Widgets modal-->
<div class="modal" id="updateWidgetModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="updateWidgetModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" style="width: max-content;">
        <div class="modal-content">
            <div class="modal-header justify-content-between">
                <span class="modal-title" id="updateWidgetModalLabel"><i class="icon-edit icon-white"></i>Edit Widget</span>
                <span class="btn btn-transparent" data-bs-dismiss="modal"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body">
                <table style="margin: 20px;">
                    <tr class="row-data">
                        <td class="col-data-label">Enter Widget Name:</td>
                        <td class="col-data-input"><input class="form-control rounded-0 nameSize" name="WidgetName" id="UpdateWidgetName"></td>
                    </tr>
                    <tr class="row-data">
                        <td class="col-data-label">Enter Control Type:</td>
                        <td class="col-data-input"><input class="form-control rounded-0 ipAddressSize" name="ControlType" id="UpdateControlType"></td>
                    </tr>
                    <tr class="row-data">
                        <td class="col-data-label">Sub-Control Type:</td>
                        <td class="col-data-input"><input class="form-control rounded-0 ipAddressSize" name="ControlSubType" id="UpdateControlSubType"></td>
                    </tr>
                    <tr class="row-data">
                        <td class="col-data-label">Number of Controls:</td>
                        <td class="col-data-input"><input class="form-control rounded-0 countSize" name="NumControls" id="UpdateNumControls"></td>
                    </tr>
                </table>
                <div class="modal-footer justify-content-between">
                    <button  id="widgetUpdateClose" class="btn btn-text btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <div>
                        <button class="btn btn-nav-icon-text" onclick="onImportWidgetFromGrid(true);" data-bs-toggle="modal" ><i class="icon-import"></i>Import Grid</button>
                        <button class="btn btn-text" onclick="updateWidget();">Apply</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--Remove Widget confirmation modal-->
<div class="modal" id="deleteWidgetModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="deleteWidgetModalLabel"aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" style="width: max-content;">
        <div class="modal-content">
            <div class="modal-header justify-content-between">
                <span class="modal-title" id="deleteWidgetModalLabel"><i class="icon-delete icon-white"></i>Confirm: Delete Widget</span>
                <span class="btn btn-transparent" data-bs-dismiss="modal"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body">
                <table style="margin: 20px;">
                    <tr class="row-data">
                        <td class="col-data-label">Delete Widget:</td>
                        <td class="col-data-input"><input class="form-control rounded-0 nameSize" name="WidgetName" id="DeleteWidgetName"></input></td>
                    </tr>
                </table>
                <div class="modal-footer justify-content-between">
                    <button id="widgetDeleteClose" class="btn btn-text btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button class="btn btn-text" onclick="deleteWidget()">Apply</button>
                </div>
            </div>
        </div>
    </div>
</div>
{{ end }}