{{ define "productcontent" }}

 <div class="grid-wrapper" >
    <div id="productsGrid" style="width: 100%; height: 220px;" class="ag-theme-balham-dark"></div>
 </div>

<script type="text/javascript" charset="utf-8">
    let commTypes = [{}];
    setCurrProduct(1);
    let currProductName = "";

    addWSDBListener();

    const ProductColumnDefs = [
        {field: "ProductID", checkboxSelection: false},
        {field: "Name", editable: false},
        {field: "ProductType", editable: false},
        {field: "Manufacturer", editable: false},
        {valueGetter: getCommTypeText, editable: false, headerName: "Comms Type"},
        {field: "NumChannels", editable: false},
    ];

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

    let productGridDiv = document.querySelector('#productsGrid');
    //init table datasource once DOM content is loaded
    document.addEventListener('DOMContentLoaded', async function () {
        console.log("in product page event listener...");
        commTypes = await getCommTypesDB();
        let addModalType = document.getElementById("AddType")
        commTypes.forEach(d => {
            let opt = document.createElement('option');
            opt.value = d.ID;
            opt.innerHTML = d.CommsName;
            addModalType.appendChild(opt);
        });
        addModalType.options[0].selected = true;
        new agGrid.Grid(productGridDiv, ProductGridOptions);
        loadProductGrid(false);
    });

    function loadProductGrid(isEditing) {
        $.post("/product/agdata", null, (data) => {
            data = parseProductDataArray(data);   // might need this for numchannels
            ProductGridOptions.api.setRowData(data);
            if (isEditing) {    // page is being edited, selected the added or updated product
                console.log("editing product node: ", getCurrProduct());
                let node = ProductGridOptions.api.getRowNode(getCurrProduct());
                node.setSelected(true);
            } else {  // product data is a reload
                console.log("loading product data: ");
                if (data != null) {
                    setCurrProduct(data[0].ProductID);
                    currProductName = data[0].Name;
                    let node = ProductGridOptions.api.getRowNode(getCurrProduct());
                    node.setSelected(true);
                } else {
                    setCurrProduct(0);
                    currProductName = "";
                }
            }
            loadWidgetGrid(getCurrProduct(), false);
        });
    }

    function onProductRowSelected(event) {
        setCurrProduct(event.data.ProductID);
        currProductName = event.data.Name;
        loadWidgetGrid(getCurrProduct(), false);
    }

    function onProductFilterTextBoxChanged() {
        ProductGridOptions.api.setQuickFilter(document.getElementById('productFilterInput').value);
    }

    function addProduct() {
        const formData = {
            "Name": document.getElementById('AddProductName').value,
            "ProductType": document.getElementById('AddProductType').value,
            "Manufacturer": document.getElementById('AddManufacturer').value,
            "Type": document.getElementById('AddType').value,
            "NumChannels": document.getElementById('AddNumChannels').value
        };
        $.post("/product/post", formData, (data) => {
            setCurrProduct(data.ProductID);
            currProductName = data.Name
            loadProductGrid(true);
            ProductGridOptions.api.paginationGoToLastPage();    // should always arrive on the page that the new entry is on and selected
        });
    }

    function updateProduct() {
        const formData = {
            "ProductID": getCurrProduct(),
            "Name": document.getElementById('UpdateProductName').value,
            "ProductType": document.getElementById('UpdateProductType').value,
            "Manufacturer": document.getElementById('UpdateManufacturer').value,
            "Type": document.getElementById('UpdateType').value,
            "NumChannels": document.getElementById('UpdateNumChannels').value
        };
        $.post("/product/update", formData, () => {
            loadProductGrid(true);
        });
        document.getElementById("productUpdateClose").click()
    }

    function removeProduct() {
        // TODO need to get the row before to select after deletion
        const selectedData = ProductGridOptions.api.getSelectedRows();
        selectedData.forEach(node => {
            let id = {"ProductID": node.ProductID};
            $.post("/product/remove", id, () => {
                loadProductGrid(false);
                ProductGridOptions.api.paginationGoToFirstPage();    // arrive on the first page after a delete with first product selected
            });
        });
        document.getElementById("productDeleteClose").click()
    }

    function importProduct(fileInput) {
        let file = fileInput[0];
        let formData = new FormData();
        formData.append('file', file);
        formData.append('DataType', "ProductCatalog");
        const fileExtension = file.name.split('.').pop();
        if (fileExtension === "xlsx") {
            $.ajax({
                url: '/uapdatabase/import',
                type: 'POST',
                async: true,
                data: formData,
                processData: false,
                contentType: false,
                success: function (r) { },
                error: function (r) { },
                timeout: 60000
            });
        } else {
            console.error("Invalid file type: '" + fileExtension + "'. Only .xlsx files are supported.");
        }
    }

    function addWSDBListener() {
        let socket = new WebSocket("ws://" + window.location.hostname + ":8088/ws");
        socket.onopen = function () {
            console.log("Status: Connected\n");
        };
        socket.onmessage = async function (event) {
            console.log("message received: ", event.data);
            if (event.data.startsWith("uapProducts") || event.data == "Database RELOAD_ALL") {
                loadProductGrid(false);
            }
            if (event.data.startsWith("uapWidgets") || event.data == "Database RELOAD_ALL") {
                console.log("Product DB change detected...");
                products = await getProductsDB();
                loadWidgetGrid(getCurrProduct(), false);
            }
            if (event.data.startsWith("uapParameters") || event.data == "Database RELOAD_ALL") {
                console.log("Widget DB change detected...");
                widgets = await getWidgetsDB();
                loadParameterGrid(currWidget, false);
            }
        };
        socket.onclose = function (evt) {
            console.log("Status: Connection closed\n");
        };
    }

    function parseProductDataArray(parray) {
        let resp = [];
        for (let i = 0; i < parray.length; i++) {
            resp.push(parseProductDataItem(parray[i]));
        }
        return resp;
    }

    function parseProductDataItem(data) {
        let resp = {
            "ProductID": data.ProductID,
            "Name": data.Name,
            "ProductType": data.ProductType,
            "Manufacturer": data.Manufacturer,
            "Type": data.Type,
            "NumChannels": 0
        };
        if (data.NumChannels != undefined) {
            resp.NumChannels = data.NumChannels;
        }
        return resp;
    }

    async function onFillUpdateProductModal() {
        let upModalType = document.getElementById("UpdateType");
        while (upModalType.lastChild) {     // clear all the types entries before loading the current ones
            upModalType.removeChild(upModalType.lastChild);
        }
        commTypes.forEach(d => {
            let opt = document.createElement('option');
            opt.value = d.ID;
            opt.innerHTML = d.CommsName;
            upModalType.appendChild(opt);
        });
        const selectedData = ProductGridOptions.api.getSelectedRows();
	    document.getElementById("UpdateProductName").value = selectedData[0].Name;
	    document.getElementById("UpdateProductType").value = selectedData[0].ProductType;
	    document.getElementById("UpdateManufacturer").value = selectedData[0].Manufacturer;
	    document.getElementById("UpdateNumChannels").value = selectedData[0].NumChannels;
        upModalType.options[selectedData[0].Type - 1].selected = true;
        document.querySelector('#updateProductButton').addEventListener('click', function (event) {
            event.preventDefault();
            $('#updateProductModal').modal('hide');
        });
    }

    async function onFillAddProductModal() {
        document.getElementById("AddProductName").value = "";
        document.getElementById("AddProductType").value = "";
        document.getElementById("AddManufacturer").value = "";
        document.getElementById("AddNumChannels").value = "";
        document.querySelector('#addProductButton').addEventListener('click', function (event) {
            event.preventDefault();
            $('#addProductModal').modal('hide');
        });
    }

    async function onFillDeleteProductModal() {
        //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("RemoveProductName").value = currProductName;
        document.querySelector('#deleteProductButton').addEventListener('click', function (event) {
            event.preventDefault();
            $('#deleteProductModal').modal('hide');
        });
        document.querySelector('#cancelProductButton').addEventListener('click', function (event) {
            event.preventDefault();
            $('#deleteProductModal').modal('hide');
        });
    }

    function onImportProductCatalog() {
        let input = document.createElement('input');
        input.type = 'file';
        input.onchange = _this => {
            let files =   Array.from(input.files);
            importProduct(files);
        };
        input.click();
    }

    function getCommTypeText(params) {
        return commTypes[params.data.Type - 1].CommsName;
    }

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

<!--Add Products modal-->
<div class="modal" id="addProductModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="addProductModalLabel" 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="addProductModalLabel"><i class="icon-add icon-white"></i>Add Product</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 Model Name:</td>
                        <td class="col-data-input"><input class="form-control rounded-0 nameSize" name="ProductName" id="AddProductName"></input></td>
                    </tr>
                    <tr class="row-data">
                        <td class="col-data-label">Enter Product Type:</td>
                        <td class="col-data-input"><input class="form-control rounded-0 nameSize" name="ProductType" id="AddProductType"></input></td>
                    </tr>
                    <tr class="row-data">
                        <td class="col-data-label">Enter Manufacturer:</td>
                        <td class="col-data-input"><input class="form-control rounded-0 nameSize" name="Manufacturer" id="AddManufacturer"></input></td>
                    </tr>
                    <tr class="row-data">
                        <td class="col-data-label">Enter # of Channels:</td>
                        <td class="col-data-input"><input class="form-control rounded-0 countSize" name="NumChannels" id="AddNumChannels"></input></td>
                    </tr>
                    <tr class="row-data">
                        <td class="col-data-label">Select Comms Type:</td>
                        <td class="col-data-input">
                            <div class="select-wrapper">
                                <select class="custom-select" name="Type" id="AddType">
                                </select>
                            </div>
                        </td>
                    </tr>
                </table>
                <div class="modal-footer justify-content-between">
                    <button class="btn btn-text btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button class="btn btn-text" onclick="addProduct()">Apply</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!--Update Products modal-->
<div class="modal" id="updateProductModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="updateProductModalLabel" 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="updateProductModalLabel"><i class="icon-edit icon-white"></i>Edit Product</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 Model Name:</td>
                        <td class="col-data-input"><input class="form-control rounded-0 nameSize" name="ProductName" id="UpdateProductName"></input></td>
                    </tr>
                    <tr class="row-data">
                        <td class="col-data-label">Enter Product Type:</td>
                        <td class="col-data-input"><input class="form-control rounded-0 nameSize" name="ProductType" id="UpdateProductType"></input></td>
                    </tr>
                    <tr class="row-data">
                        <td class="col-data-label">Enter Manufacturer:</td>
                        <td class="col-data-input"><input class="form-control rounded-0 nameSize" name="Manufacturer" id="UpdateManufacturer"></input></td>
                    </tr>
                    <tr class="row-data">
                        <td class="col-data-label">Enter # of Channels:</td>
                        <td class="col-data-input"><input class="form-control rounded-0 countSize" name="NumChannels" id="UpdateNumChannels"></input></td>
                    </tr>
                    <tr class="row-data">
                        <td class="col-data-label">Select Comms Type:</td>
                        <td class="col-data-input">
                            <div class="select-wrapper">
                                <select class="custom-select" name="Type" id="UpdateType">
                                </select>
                            </div>
                        </td>
                    </tr>
                </table>
                <div class="modal-footer justify-content-between">
                    <button id="productUpdateClose" class="btn btn-text btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button class="btn btn-text" onclick="updateProduct()">Apply</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!--Delete Products modal-->
<div class="modal" id="deleteProductModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="deleteProductModalLabel"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="deleteProductModalLabel"><i class="icon-delete icon-white"></i>Confirm: Delete Product:</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 Product:</td>
                        <td class="col-data-input"><input class="form-control rounded-0 nameSize" name="ProductName" id="RemoveProductName"></input></td>
                    </tr>
                </table>
                <div class="modal-footer justify-content-between">
                    <button id="productDeleteClose" class="btn btn-text btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button class="btn btn-text" onclick="removeProduct()">Apply</button>
                </div>
            </div>
        </div>
    </div>
</div>


{{ end }}