{{ define "content" }}
<link href="/static/css/pages/category.css" rel="stylesheet">

<div class="row" style="height: 100%;width: 100%">
    <div class="row splitBorder" style="height: 100%; width: 50%;">
        <nav class="navbar navbar-expand">
            <div class="container-fluid">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item dropdown">
                        <button onclick="" class="btn btn-nav-icon" id="navMenuButton" data-bs-toggle="dropdown" role="button" aria-expanded="false" data-toggle="tooltip" data-placement="bottom" title="Navigation Menu"><i class="icon-btn icon-menu" id="navMenuImage"></i></button>
                        <ul class="dropdown-menu dropdown-menu-nav">
                            <li><hr class="dropdown-item-divider" /></li>
                            <li class="dropdown-item dropdown-item-nav">
                                <button class="dropdown-item dropdown-item-nav btn-item-text-nav" id="GroupCatAddMenuButton" onclick="displayDialog('addGroupCatModal'); document.getElementById('addGroupCatName').value = '';"><i class="icon-btn-nav-menu icon-plain icon-add" id="GroupCatAddMenuImg"></i>Add</button>
                            </li>
                            <li><div class="dropdown-item-divider"></div></li>
                            <li class="dropdown-item dropdown-item-nav">
                                <button class="dropdown-item dropdown-item-nav btn-item-text-nav" id="GroupCatMoveMenuButton" onclick="moveGroupCategoryCheck()"><i class="icon-btn-nav-menu icon-plain icon-move" id="GroupCatMoveMenuImg"></i>Move</button>
                            </li>
                            <li><div class="dropdown-item-divider"></div></li>
                            <li class="dropdown-item dropdown-item-nav">
                                <button class="dropdown-item dropdown-item-nav btn-item-text-nav" id="GroupCatRenameMenuButton" onclick="displayDialog('renameGroupCatModal'); document.getElementById('renameGroupCatName').value = '';"><i class="icon-btn-nav-menu icon-plain icon-rename-disabled" id="GroupCatRenameMenuImg"></i>Rename</button>
                            </li>
                            <li><div class="dropdown-item-divider"></div></li>
                            <li class="dropdown-item dropdown-item-nav">
                                <button class="dropdown-item dropdown-item-nav btn-item-text-nav" id="GroupCatDeleteMenuButton"  onclick="removeGroupCatCheck()"><i class="icon-btn-nav-menu icon-plain icon-delete" id="GroupCatDeleteMenuImg"></i>Delete</button>
                            </li>
                            <li><div class="dropdown-section-divider"></div></li>
                            <li class="dropdown-item dropdown-item-nav">
                                <button class="dropdown-item dropdown-item-nav btn-item-text-nav" id="autoGenerateGroupMenuButton" onclick="showAutoGenerateModal();"><i class="icon-btn-nav-menu icon-plain icon-auto" id="autoGenerateGroupMenuImg"></i>Generate</button>
                            </li>
                            <li><hr class="dropdown-item-divider" /></li>
                        </ul>
                    </li>
                    <li>
                        <span><i class="icon-separator"></i></span>
                    </li>
                    <li>
                        <button class="btn btn-nav-icon" id="GroupCatAddButton" onclick="displayDialog('addGroupCatModal'); document.getElementById('addGroupCatName').value = '';" data-toggle="tooltip" data-placement="bottom" title="Add"><i class="icon-btn icon-add" id="GroupCatAddImg"></i></button>
                    </li>
                    <li>
                        <button class="btn btn-nav-icon" id="GroupCatMoveButton" onclick="moveGroupCategoryCheck()" data-toggle="tooltip" data-placement="bottom" title="Move"><i class="icon-btn icon-move" id="GroupCatMoveImg"></i></button>
                    </li>
                    <li>
                        <button class="btn btn-nav-icon" id="GroupCatRenameButton" onclick="showGroupCategoryRenameModal();" data-toggle="tooltip" data-placement="bottom" title="Rename"><i class="icon-btn icon-rename-disabled" id="GroupCatRenameImg"></i></button>
                    </li>
                    <li>
                        <button class="btn btn-nav-icon" id="GroupCatDeleteButton"  onclick="removeGroupCatCheck()" data-toggle="tooltip" data-placement="bottom" title="Delete"><i class="icon-btn icon-delete" id="GroupCatDeleteImg"></i></button>
                    </li>
                    <li>
                        <span><i class="icon-separator"></i></span>
                    </li>
                    <li>
                        <button class="btn btn-nav-icon" id="autoGenerateGroupButton" onclick="showAutoGenerateModal();" data-toggle="tooltip" data-placement="bottom" title="Generate"><i class="icon-btn icon-auto" id="autoGenerateGroupImg"></i></button>
                    </li>
                </ul>
            </div>
        </nav>

        <div id="groupCatSummaryBar" class="grid-summary-bar" role="status" aria-live="polite">
            <div class="grid-summary-item">
                <span id="groupCatSummarySelectedLabel" class="col-data-label">Selected:</span>
                <span id="groupCatSummarySelectedValue" class="form-control rounded-0 auto-size" aria-labelledby="groupCatSummarySelectedLabel"></span>
            </div>
            <span class="grid-summary-sep"><i class="icon-separator" aria-hidden="true"></i></span>
            <div class="grid-summary-item">
                <span id="groupCatSummaryIdLabel" class="col-data-label">ID:</span>
                <span id="groupCatSummaryIdValue" class="form-control rounded-0 auto-size" aria-labelledby="groupCatSummaryIdLabel"></span>
            </div>
            <span class="grid-summary-sep"><i class="icon-separator" aria-hidden="true"></i></span>
            <div class="grid-summary-item">
                <span id="groupCatSummarySubfoldersLabel" class="col-data-label">Subfolders:</span>
                <span id="groupCatSummarySubfoldersValue" class="form-control rounded-0 auto-size" aria-labelledby="groupCatSummarySubfoldersLabel"></span>
            </div>
            <span class="grid-summary-sep"><i class="icon-separator" aria-hidden="true"></i></span>
            <div class="grid-summary-item">
                <span id="groupCatSummaryResourcesLabel" class="col-data-label">Resources (L/S/D):</span>
                <span id="groupCatSummaryResourcesValue" class="form-control rounded-0 auto-size" aria-labelledby="groupCatSummaryResourcesLabel"></span>
            </div>
        </div>


        <div class="grid-wrapper" style="height:calc(100% - 39px); width:100%;">
            <div id="groupCatGrid" style="height:100%;width:100%;" class="ag-theme-balham-dark"></div>
        </div>
    </div>
    <div class="col tab group-cat-editor-style" style="flex:0 0 auto; width:50%; height:calc(100% - 2px); background-color: var(--panel-bg);">
        <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="tablinks tab-button active" id="levels-tab" data-bs-toggle="tab" data-bs-target="#levels" type="button" role="tab" aria-controls="levels" aria-selected="false">Levels</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="tab-separator" type="button" role="tab"><i class="icon-tab-separator"></i></button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="tablinks tab-button" id="sources-tab" data-bs-toggle="tab" data-bs-target="#sources" type="button" role="tab" aria-controls="sources" aria-selected="true">Sources</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="tab-separator" type="button" role="tab"><i class="icon-tab-separator"></i></button>
            </li>
            <li class="nav-item" role="presentation" id="layoutOption">
                <button class="tablinks tab-button" id="destinations-tab" data-bs-toggle="tab" data-bs-target="#destinations" type="button" role="tab" aria-controls="destinations" aria-selected="false">Destinations</button>
            </li>
            <li class="nav-item" role="presentation" id="layoutOptionSeparator">
                <button class="tab-separator" type="button" role="tab"><i class="icon-tab-separator"></i></button>
            </li>
        </ul>
        <div class="tab-content" style="height:calc(100% - 36px); width:100%;">
            {{ template "groupcategoriesavailable" . }}
        </div>
    </div>
</div>

<script src="/static/js/keystrokeHandling.js"></script>

<script type="text/javascript" charset="utf-8">
    const objectTypeName = "Group Category";

    let groupData;
    let groupMoveData;
    let rowDataExpand = [];
    let expandMap = new Map();

    const groupCatColumnDefs = [
        {field: "Name", cellRenderer: "cellRenderer", flex: 3},
        {field: "Type", hide: true},
        {field: "ParentId", hide: true},
    ];

    var groupCatGridOptions = {
        defaultColDef: {
            resizable: true,
            sortable: true,
            flex: 1,
        },
        columnDefs: groupCatColumnDefs,
        suppressMenuHide: true,
        components: {cellRenderer: GroupCatNameCellRenderer},
        animateRows: true,
        headerHeight: 36,
        rowHeight: 31,
        rowSelection: 'multiple',
        onSelectionChanged: onGroupCategorySelectionChanged,
        onRowClicked: updateGroupCatSummaryBar,
    };

    var groupCatMoveGridOptions = {
        defaultColDef: {
            resizable: true,
            sortable: true,
            flex: 1,
        },
        columnDefs: groupCatColumnDefs,
        suppressMenuHide: true,
        components: {cellRenderer: GroupCatMoveNameCellRenderer},
        animateRows: true,
        headerHeight: 0,
        rowHeight: 31,
        rowSelection: 'single',
    }

    function GroupCatNameCellRenderer() {}

    function GroupCatMoveNameCellRenderer() {}

    function updateGroupCatSummaryBar() {
        const TYPE = { Folder: 1, Destination: 2, Source: 3, Level: 4 };

        const api = groupCatGridOptions?.api;
        if (!api) return;

        const sel = api.getSelectedRows();
        let name = "—";
        let id = "—";
        let subfolders = 0, nLevels = 0, nSources = 0, nDests = 0;
        let isRoot = false;

        if (sel.length) {
            const row = sel[0];

            name = (row && (row.Name ?? row.Id)) ?? "—";
            id = row?.Id ?? "—";

            const rootId = (typeof groupData !== "undefined" && groupData?.Id) ? groupData.Id : null;
            isRoot =
                (typeof name === "string" && /^(groupcategories)$/i.test(name)) ||
                row.ParentId == null || row.ParentId === 0 ||
                (rootId != null && row.Id === rootId);

            const node = (typeof recursiveFindById === "function" && typeof groupData !== "undefined")
                ? (recursiveFindById(groupData, row.Id) || row)
                : row;

            const kids = Array.isArray(node?.Children) ? node.Children : [];
            subfolders = kids.filter(ch => ch.Type === TYPE.Folder).length;

            if (!isRoot) {
                nLevels  = kids.filter(ch => ch.Type === TYPE.Level).length;
                nSources = kids.filter(ch => ch.Type === TYPE.Source).length;
                nDests   = kids.filter(ch => ch.Type === TYPE.Destination).length;
            }
        }

        setText('groupCatSummarySelectedValue',   name);
        setText('groupCatSummaryIdValue',         id);
        setText('groupCatSummarySubfoldersValue', subfolders);
        setText('groupCatSummaryResourcesValue',  isRoot ? '-/-/-' : `${nLevels}/${nSources}/${nDests}`);

        function setText(id, v) {
            const el = document.getElementById(id);
            if (el) el.textContent = String(v);
        }
    }

    function recursiveFindById(rowData, id) {
        if (rowData) {
            let n = rowData.find(rowData => rowData.Id === id);
            return n || (rowData.every(rowData => !(n = recursiveFindById(rowData.Children, id))), n);
        }
    }

    function makeGroupDataBFS(rowData, pos) {
        if (rowData) {
            rowData.forEach(rowData => {
                rowData.level = pos;
                rowDataExpand.push(rowData);
                if (rowData.expand) {
                    makeGroupDataBFS(rowData.Children, pos + 30);
                } else if (expandMap.get(rowData.Id)) {
                    rowData.expand = true;
                    makeGroupDataBFS(rowData.Children, pos + 30);
                }
            });
        }
    }

    function makeGroupMoveDataBFS(rowData, pos) {
        if (rowData) {
            rowData.forEach(rowData => {
                rowData.level = pos;
                rowDataExpand.push(rowData);
                if (rowData.expand) {
                    makeGroupMoveDataBFS(rowData.Children, pos + 30);
                }
            });
        }
    }

    GroupCatNameCellRenderer.prototype.init = function (rowData) {
        this.eGui = document.createElement("span");
        this.eGui.style = `padding-left:${rowData.data.level}px`;
        switch (rowData.data.Type) {
            case TypeGroup:
                if(rowData.data.expand || expandMap.get(rowData.data.Id)){
                    this.eGui.innerHTML = '<i class="icon-plain icon-arrow-down"></i> <i class="icon-plain icon-folder-open"></i> ' + rowData.value;
                } else {
                    this.eGui.innerHTML = '<i class="icon-plain icon-arrow-right"></i> <i class="icon-plain icon-folder-close"></i> ' + rowData.value;
                }
                break;
            case TypeDestination:
                this.eGui.innerHTML = '<i class="icon-plain icon-indent-level"></i> <i class="icon-plain icon-destinations"></i> ' + rowData.value;
                break;
            case TypeSource:
                this.eGui.innerHTML = '<i class="icon-plain icon-indent-level"></i> <i class="icon-plain icon-sources"></i> ' + rowData.value;
                break;
            case TypeLevel:
                this.eGui.innerHTML = '<i class="icon-plain icon-indent-level"></i> <i class="icon-plain icon-levels"></i> ' + rowData.value;
                break;
        }
        this.eventListener = function () {
            updateGroupData(rowData.data.Id);
            groupCatGridOptions.api.forEachNode((node) => {
                if (node.data.Id == rowData.data.Id) {
                    node.setSelected(true, true);
                }
            });
        };
        this.eGui.addEventListener("click", this.eventListener);
    }

    GroupCatMoveNameCellRenderer.prototype.init = function (rowData) {
        this.eGui = document.createElement("span");
        this.eGui.style = `padding-left:${rowData.data.level}px`;
        this.eGui.innerHTML = ((rowData.data.expand) ? '<i class="icon-plain icon-arrow-down"></i> <i class="icon-plain icon-folder-open"></i> ' : '<i class="icon-plain icon-arrow-right"></i> <i class="icon-plain icon-folder-close"></i> ') + rowData.value;
        this.eventListener = function () {
            updateGroupMoveData(rowData.data.Id);
            groupCatMoveGridOptions.api.forEachNode((node) => {
                if (node.data.Id == rowData.data.Id) {
                    node.setSelected(true, true);
                }
            });
        };
        this.eGui.addEventListener("click", this.eventListener);
    }

    GroupCatNameCellRenderer.prototype.getGui = function () {
        return this.eGui;
    }

    GroupCatMoveNameCellRenderer.prototype.getGui = function () {
        return this.eGui;
    }

    function updateGroupData(id) {
        let data = recursiveFindById(groupData, id);
        data.expand = !data.expand;
        expandMap.set(id, data.expand);
        rowDataExpand = [];
        makeGroupDataBFS(groupData, 0);
        groupCatGridOptions.api.setRowData(rowDataExpand);
        groupCatGridOptions.api.forEachNode((node) => {
            if (node.data.Id == id) {
                node.setSelected(true, true);
                groupCatGridOptions.api.ensureNodeVisible(node, 'middle');
            }
        });
    }

    function updateGroupMoveData(id) {
        let data = recursiveFindById(groupMoveData, id);
        data.expand = !data.expand;
        rowDataExpand = [];
        makeGroupMoveDataBFS(groupMoveData, 0);
        groupCatMoveGridOptions.api.setRowData(rowDataExpand);
    }

    document.addEventListener('DOMContentLoaded', function () {// set up the grids after the page has finished loading
        document.getElementById("groupCatGrid").ag_grid = new agGrid.Grid(document.querySelector('#groupCatGrid'), groupCatGridOptions);
        refreshGroupCategoryTree();

        document.getElementById("groupMoveGrid").ag_grid = new agGrid.Grid(document.querySelector('#groupMoveGrid'), groupCatMoveGridOptions);

        addWSDBListener();
        window.addEventListener(DBMODE_TABLE, handleGroupCatModeChange);
        updateGroupCatSummaryBar();
    });

    function addWSDBListener() {
        var socket = new WebSocket("ws://" + window.location.hostname + ":8080/dsws");
        socket.onopen = function () {
            console.log("Status: Connected\n");
        };
        socket.onmessage = function (event) {
            console.log(event.data);
            const msg = JSON.parse(event.data);
            console.log("WS message: " + JSON.stringify(msg));

            switch (msg.table) {
                case GROUP_CATEGORY_TABLE:
                    if(msg.operation === INSERT_OP) {
                        if (sessionStorage.getItem('insertOp') && sessionStorage.getItem('insertOp') == 'autogenerate') {
                            refreshGroupCategoryTreeAfterAutoGeneration();
                            sessionStorage.removeItem('insertOp');
                        } else {
                            const selectedInsertRows = groupCatGridOptions.api.getSelectedRows();
                            if (selectedInsertRows.length > 0) {
                                refreshGroupCategoryTreeAfterUpdate(selectedInsertRows[0].Id);
                            } else {
                                refreshGroupCategoryTree();
                            }
                        }
                    } else if(msg.operation === UPDATE_OP) {
                        const selectedUpdateRows = groupCatGridOptions.api.getSelectedRows();
                        if (selectedUpdateRows.length > 0) {
                            refreshGroupCategoryTreeAfterUpdate(selectedUpdateRows[0].Id);
                        } else {
                            refreshGroupCategoryTree();
                        }
                    } else {
                        refreshGroupCategoryTree();
                    }
                    break;
                case DESTINATION_TABLE:
                    refreshSelectedCatGroupAvailables(availableDestinationsGridOptions, TypeDestination);
                    refreshGroupCategoryTree();
                    updateGroupCatSummaryBar();
                    break;
                case SOURCE_TABLE:
                    refreshSelectedCatGroupAvailables(availableSourcesGridOptions, TypeSource);
                    refreshGroupCategoryTree();
                    updateGroupCatSummaryBar();
                    break;
                case LEVEL_TABLE:
                    refreshSelectedCatGroupAvailables(availableLevelsGridOptions, TypeLevel);
                    refreshGroupCategoryTree();
                    updateGroupCatSummaryBar();
                    break;
                case DATABASE_TABLE:
                    handleDatabaseTableChange(msg, () => {
                        refreshGroupCategoryTree();
                        refreshSelectedCatGroupAvailables(availableDestinationsGridOptions, TypeDestination);
                        refreshSelectedCatGroupAvailables(availableSourcesGridOptions, TypeSource);
                        refreshSelectedCatGroupAvailables(availableLevelsGridOptions, TypeLevel);
                        updateGroupCatSummaryBar();
                    });
                    break;
            }
        };
        socket.onerror = function(event) {
            console.log("Connection Error: " + JSON.stringify(event));
        };
        socket.onclose = function (event) {
            console.log("Socket is closed. Reconnect will be attempted in 1 second. Error Code: " +  event.code + ", Reason: " + event.reason);
            setTimeout(function() {
                addWSDBListener();
            }, 1000);
        };
    }

    function removeGroupCatCheck() {
        let selectedRows = groupCatGridOptions.api.getSelectedRows();
        if (selectedRows.length > 0) {
            let ids = selectedRows.map(node => node.Id);
            if (ids.indexOf(1) == -1) {
                displayDialog("removeGroupCategoryModal");
            } else {
                displayWarningDialog("The GroupCategories folder cannot be removed.  This is the root folder that contains all other group categories.");
            }
        } else {
            displayWarningDialog("Please select at least one item to remove.");
        }
    }

    function removeGroupCatRows() {
        hideDialog("removeGroupCategoryModal");
        let selectedRows = groupCatGridOptions.api.getSelectedRows();
        if (selectedRows.length > 0) {
            displayDialog("LoadingModal");
            $.ajax({url: "/groupcategory/remove?ids=" + selectedRows.map(node => node.Id),
                error: (err) => {
                    displayErrorDialog(err.responseText || JSON.stringify(err));
                }
            });
        }
    }

    function moveGroupCategoryCheck() {
        const selectedRows = groupCatGridOptions.api.getSelectedRows();
        const firstParentId = selectedRows[0].ParentId
        for (let i = 0; i < selectedRows.length; i++) {
            if (selectedRows[i].ParentId != firstParentId) {
                displayWarningDialog("Items from multiple groups cannot be moved simultaneously to a new group.");
                return;
            }
        }
        if (selectedRows[0].Id != 1) {
            refreshGroupCategoryMoveTree(selectedRows[0]);
        } else {
            displayWarningDialog("The GroupCategories folder cannot be moved.  This is the root folder that contains all other group categories.");
        }
    }

    function moveGroupCategory() {
        const moveSelectedRows = groupCatMoveGridOptions.api.getSelectedRows();
        if(moveSelectedRows.length == 0) {
            displayWarningDialog("Please select at least one group category to move.");
            return;
        }

        const groupCatSelectedRows = groupCatGridOptions.api.getSelectedRows();
        const newSelectedParentId = moveSelectedRows[0].Id;
        let curParentId = moveSelectedRows[0].Id;
        let pathToNewLocation = [];
        while (curParentId) {
            expandMap.set(curParentId, true);
            groupCatMoveGridOptions.api.forEachNode((node) => {
                if (node.data.Id == curParentId) {
                    pathToNewLocation.unshift(node.data.Id);
                    curParentId = node.data.ParentId;
                }
            });
        }

        let errors = [];
        for (let i = 0; i < groupCatSelectedRows.length; i++) {
            if (pathToNewLocation.includes(groupCatSelectedRows[i].Id)) {
                errors.push("You cannot move " + groupCatSelectedRows[i].Name + " into itself or any group it contains.");
            }

            if (groupCatSelectedRows[i].ParentId == newSelectedParentId) {
                errors.push(groupCatSelectedRows[i].Name + "  is already in " + moveSelectedRows[0].Name);
            }
         }

        if (errors.length > 0) {
            displayErrorMessagesDialog("The following errors were found that prevent moving elements", errors);
            return;
        }

        const urlParameters = [
            "ids=" + groupCatSelectedRows.map(node => node.Id),
            "parentId=" + newSelectedParentId
        ];

        displayDialog("LoadingModal");
        $.ajax({
            url: "/groupcategory/update?" + urlParameters.join("&"),
            success: () => {
                hideDialog('moveGroupCategoryModal');
            },
            error: (err) => {
                displayErrorDialog(err.responseText || JSON.stringify(err));
            }
        });
    }

    function onGroupCategorySelectionChanged() {
        refreshSelectedCatGroupAvailables(availableDestinationsGridOptions, TypeDestination);
        refreshSelectedCatGroupAvailables(availableSourcesGridOptions, TypeSource);
        refreshSelectedCatGroupAvailables(availableLevelsGridOptions, TypeLevel);
        refreshGroupCatButtons();
        updateGroupCatSummaryBar();
    }

    function refreshSelectedCatGroupAvailables(grid, type) {
        const selectedRows = groupCatGridOptions.api.getSelectedRows();
        if (selectedRows.length === 1) {
            const firstSelectedAvailableNodeIndex = getFirstSelectedNodeIndex(grid);
            const urlParameters = [
                "groupId=" + getGroupId(selectedRows[0]),
                "type=" + type
            ];
            fetch('/groupcategory/availLeaves?' + urlParameters.join("&"))
                .then((response) => response.json())
                .then((data) => {
                    grid.api.setRowData(data);
                    setNodeSelected(grid, firstSelectedAvailableNodeIndex);
                    updateGenerateMenu();

                    // Calling 'setRowData' takes some time to 'redrawRows' rows for the table so we need to wait to remove the Loading Modal
                    setTimeout(function () {
                        hideDialog("LoadingModal");
                    }, 1000);
                    requestAnimationFrame(updateGroupCatSummaryBar);
            });
        }
    }

    function updateGenerateMenu() {
        document.getElementById("autoGenerateLevel").disabled = availableLevelsGridOptions.api.getDisplayedRowCount() == 0;
        document.getElementById("autoGenerateSource").disabled = availableSourcesGridOptions.api.getDisplayedRowCount() == 0;
        document.getElementById("autoGenerateDestination").disabled = availableDestinationsGridOptions.api.getDisplayedRowCount() == 0;
        if (availableLevelsGridOptions.api.getDisplayedRowCount() == 0 &&
            availableSourcesGridOptions.api.getDisplayedRowCount() == 0 &&
            availableDestinationsGridOptions.api.getDisplayedRowCount() == 0) {
            disableUiButton("autoGenerateGroup");
            disableUiButton("autoGenerateGroupMenu");
        } else {
            enableUiButton("autoGenerateGroup");
            enableUiButton("autoGenerateGroupMenu");
        }
        if (dbMode == DBMode_Protect) {
            disableUiButton("autoGenerateGroup");
            disableUiButton("autoGenerateGroupMenu");
        }
    }

    function getFirstSelectedNodeIndex(grid) {
        const selectedNodes = grid.api.getSelectedNodes();
        let firstSelectedNodeIndex = 0;
        if (selectedNodes.length > 0) {
            firstSelectedNodeIndex = grid.api.getSelectedNodes()[0].rowIndex;
        }
        return firstSelectedNodeIndex;
    }

    function setNodeSelected(grid, firstSelectedNodeIndex) {
        let rowCount = grid.api.getDisplayedRowCount();
        if(firstSelectedNodeIndex < rowCount) {
            grid.api.forEachNode((node) => {
                if (node.rowIndex == firstSelectedNodeIndex) {
                    node.setSelected(true, true);
                }
            });
            grid.api.ensureIndexVisible(firstSelectedNodeIndex, 'middle');
        } else {
            grid.api.forEachNode((node) => {
                if (node.rowIndex == rowCount-1) {
                    node.setSelected(true, true);
                }
            });
            if (rowCount > 1) {
                grid.api.ensureIndexVisible(rowCount-1, 'bottom');
            }
        }
    }

    function addGroupCategory() {
        let groupCatName = document.getElementById('addGroupCatName').value;
        groupCatName = groupCatName.trim();
        if (!validateString(groupCatName)) {
            displayErrorDialog(NameErrorMessage);
            return;
        }

        const selectedRows = groupCatGridOptions.api.getSelectedRows();
        if (selectedRows.length < 1) {
            displayWarningDialog("Please select a group for the new " + objectTypeName + " to be placed in.");
            return;
        }
        expandMap.set(selectedRows[0].parentId, true);
        if (selectedRows[0].Children) {
            for (var i = 0; i < selectedRows[0].Children.length; i++) {
                if (selectedRows[0].Children[i].Name == groupCatName) {
                    displayErrorDialog(getDuplicateNamesError(groupCatName, objectTypeName, selectedRows[0].Children[i].Id) + " in the " + selectedRows[0].Name + " group.");
                    return;
                }
            }
        }
        let parentId;
        if (selectedRows.length === 1) {
            parentId = getGroupId(selectedRows[0]);
        }

        const urlParameters = [
            "name=" + encodeURIComponent(groupCatName),
            "parentId=" + parentId
        ];
        displayDialog("LoadingModal");
        $.ajax({
            url: "/groupcategory/add?" + urlParameters.join("&"),
            success: () => {
                hideDialog("addGroupCatModal");
            },
            error: (err) => {
                displayErrorDialog(err.responseText || JSON.stringify(err));
            }
        });
    }

    function renameGroupCategory() {
        let groupCatName = document.getElementById('renameGroupCatName').value;
        groupCatName = groupCatName.trim();
        if (!validateString(groupCatName)) {
            displayErrorDialog(NameErrorMessage);
            return;
        }

        const selectedRows = groupCatGridOptions.api.getSelectedRows();
        if (selectedRows.length < 1) {
            displayWarningDialog("Please select a " + objectTypeName + " to rename.");
            return;
        }
        expandMap.set(selectedRows[0].ParentId, true);
        const parentNode = recursiveFindById(groupData, selectedRows[0].ParentId);
        if (parentNode.Children) {
            for (var i = 0; i < parentNode.Children.length; i++) {
                if ((parentNode.Children[i].Name == groupCatName) && (selectedRows[0].Id != parentNode.Children[i].Id)) {
                    displayErrorDialog(getDuplicateNamesError(groupCatName, objectTypeName, parentNode.Children[i].Id) + " in the " + parentNode.Name + " Group");
                    return;
                }
            }
        }

        if (groupCatName == selectedRows[0].Name) {
            displayErrorDialog(getSameNameError(groupCatName, objectTypeName));
            return;
        }

        const urlParameters = [
            "name=" + encodeURIComponent(groupCatName),
            "id=" + selectedRows[0].Id
        ];
        displayDialog("LoadingModal");
        $.ajax({
            url: "/groupcategory/rename?" + urlParameters.join("&"),
            success: () => {
                hideDialog("renameGroupCatModal");
            },
            error: (err) => {
                displayErrorDialog(err.responseText || JSON.stringify(err));
            }
        });

    }

    function showAutoGenerateModal() {
        clearAutoGenerateSelections();
        if (groupData && groupData.length > 0 &&
            groupData[0].Children && groupData[0].Children.length > 0) {
            displayDialog('autoGenerateWarningModal');
        } else {
            displayDialog('autoGenerateGroupCatModal');
        }
    }

    function confirmAutoGenerate() {
        hideDialog('autoGenerateWarningModal');
        displayDialog('autoGenerateGroupCatModal');
    }

    function clearAutoGenerateSelections() {
        document.getElementById("autoGenerateLevel").checked = false;
        document.getElementById("autoGenerateSource").checked = false;
        document.getElementById("autoGenerateDestination").checked = false;
    }

    function autoGenerateGroupCategory() {
        const levelCheck = document.getElementById("autoGenerateLevel").checked;
        const srcCheck = document.getElementById("autoGenerateSource").checked;
        const destCheck = document.getElementById("autoGenerateDestination").checked;
        if (levelCheck || srcCheck || destCheck) {
            hideDialog('autoGenerateGroupCatModal');
            sessionStorage.setItem('insertOp', 'autogenerate');
            const urlParameters = [
                "level=" + levelCheck,
                "source=" + srcCheck,
                "destination=" + destCheck,
            ];
            displayDialog("LoadingModal");
            $.ajax({url: "/groupcategory/autogenerate?" + urlParameters.join("&"),
                error: (err) => {
                    displayErrorDialog(err.responseText || JSON.stringify(err));
                }
            });
        } else {
            displayWarningDialog("Please select at least one option to auto-generate group categories.");
        }
    }

    function getGroupId(rowData) {
        if(rowData.Type === TypeGroup) {
            return rowData.Id;
        }
        return rowData.ParentId;
    }

    function refreshGroupCategoryTree() {
        let firstSelectedNodeIndex = getFirstSelectedNodeIndex(groupCatGridOptions);
        fetch('/groupcategory/agdatassds')
            .then((response) => response.json())
            .then((data) => {
                rowDataExpand = [];
                groupData = data;
                makeGroupDataBFS(groupData, 0);
                groupCatGridOptions.api.setRowData(rowDataExpand);
                setNodeSelected(groupCatGridOptions, firstSelectedNodeIndex);
            });
    }

    function refreshGroupCategoryTreeAfterAutoGeneration() {
        fetch('/groupcategory/agdatassds')
            .then((response) => response.json())
            .then((data) => {
                expandMap.clear();
                expandMap.set(1, true);
                rowDataExpand = [];
                groupData = data;
                makeGroupDataBFS(groupData, 0);
                groupCatGridOptions.api.setRowData(rowDataExpand);
                setNodeSelected(groupCatGridOptions, 0);
        });
    }

    function refreshGroupCategoryTreeAfterUpdate(firstAddedId) {
        fetch('/groupcategory/agdatassds')
            .then((response) => response.json())
            .then((data) => {
                rowDataExpand = [];
                groupData = data;
                makeGroupDataBFS(groupData, 0);
                groupCatGridOptions.api.setRowData(rowDataExpand);
                groupCatGridOptions.api.forEachNode((node) => {
                    if (node.data.Id == firstAddedId) {
                        node.setSelected(true, true);
                        groupCatGridOptions.api.ensureNodeVisible(node, 'middle');
                    }
                });
            });
    }

    function refreshGroupCategoryMoveTree(groupCategoryData) {
        displayDialog("LoadingModal");
        fetch('/groupcategory/allGroups?id=' + groupCategoryData.Id)
            .then((response) => response.json())
            .then((data) => {
                rowDataExpand = [];
                groupMoveData = data;
                makeGroupMoveDataBFS(groupMoveData, 0);
                groupCatMoveGridOptions.api.setRowData((groupCategoryData.Type === TypeGroup) ? filterOutFromTreeStructure(groupCategoryData.Id, rowDataExpand, "Id", "Children") : rowDataExpand);
                setNodeSelected(groupCatMoveGridOptions, 0);

                displayDialog("moveGroupCategoryModal");
                hideDialog("LoadingModal");
            });
    }

    function isRootGroupSelected (rowData) {
        return rowData.Type === TypeGroup && rowData.Id === 1 && rowData.Name === "GroupCategories";
    }

    function refreshGroupCatButtons() {
        const assignButtonIds = ["GroupCatLevelAdd", "GroupCatSourceAdd", "GroupCatdestinationAdd"];
        const moveButtonIds = ["GroupCatMove", "GroupCatMoveMenu"];
        const addButtonIds = ["GroupCatAdd", "GroupCatAddMenu"];
        const deleteButtonIds = ["GroupCatDelete", "GroupCatDeleteMenu"];
        const renameButtonIds = ["GroupCatRename", "GroupCatRenameMenu"];

        if (dbMode == DBMode_Protect) {
            // Disable all buttons if in protected mode
            disableButtonIds(moveButtonIds.concat(assignButtonIds, addButtonIds, deleteButtonIds, renameButtonIds));
            return;
        }

        const selectedRows = groupCatGridOptions.api.getSelectedRows();
        if (selectedRows.length < 1) {
            return;
        }

        if (isRootGroupSelected(selectedRows[0]) && selectedRows.length == 1) {
            disableButtonIds(deleteButtonIds.concat(moveButtonIds, renameButtonIds, assignButtonIds));
            return;
        }

        enableButtonIds(deleteButtonIds);
        if (selectedRows.length > 1) {
            disableButtonIds(assignButtonIds.concat(addButtonIds, renameButtonIds));

            // If they are all group types or if none are group types, enable the move button
            const selectedRowTypes = [...new Set(selectedRows.map(node => node.Type))];
            if ((selectedRowTypes.includes(TypeGroup) && selectedRowTypes.length == 1) || !selectedRowTypes.includes(TypeGroup)) {
                enableButtonIds(moveButtonIds);
            } else {
                disableButtonIds(moveButtonIds);
            }
        } else {
            if (selectedRows[0].Type === TypeGroup) {
                enableButtonIds(assignButtonIds.concat(renameButtonIds));
            } else {
                disableButtonIds(assignButtonIds.concat(renameButtonIds));
            }
            enableButtonIds(moveButtonIds);
        }
    }

    function handleGroupCatModeChange(eventData) {
        dbMode = eventData.detail.dbMode;
        if (eventData.detail.dbMode == DBMode_Protect) {
            disableButtonIds(["GroupCatAdd", "GroupCatAddMenu", "GroupCatRename", "GroupCatRenameMenu", "GroupCatMove", "GroupCatMoveMenu", "GroupCatDelete", "GroupCatDeleteMenu", "autoGenerateGroup", "autoGenerateGroupMenu", "GroupCatLevelAdd", "GroupCatLevelAddMenu", "GroupCatSourceAdd", "GroupCatSourceAddMenu", "GroupCatDestinationAdd", "GroupCatDestinationAddMenu"]);
        } else {
            enableButtonIds(["autoGenerateGroup", "autoGenerateGroupMenu", "GroupCatLevelAdd", "GroupCatLevelAddMenu", "GroupCatSourceAdd", "GroupCatSourceAddMenu", "GroupCatDestinationAdd", "GroupCatDestinationAddMenu"]);
            refreshGroupCatButtons();
        }
    }

    function showGroupCategoryRenameModal() {
        let selectedRows = groupCatGridOptions.api.getSelectedRows();
        if (selectedRows.length == 1) {
            document.getElementById('renameGroupCatName').value = selectedRows[0].Name;
            displayDialog('renameGroupCatModal');
        } else {
            displayWarningDialog("Please select at least one group category to rename.");
        }
    }
</script>

<div class="modal" id="autoGenerateWarningModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="autoGenerateWarningModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header justify-content-between">
                <span class="modal-title" id="autoGenerateWarningModalLabel"><i class="icon-auto icon-white"></i>Generate Group Categories</span>
                <span class="btn btn-transparent" onclick="hideDialog('autoGenerateWarningModal');"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body">
                <p class="container-data">All existing groups will be deleted and new ones will be generated based on the active database. If you already created favorites with the existing groups, they will be cleared out and you will need to reconfigure them based on the newly generated groups.</p>
            </div>
            <div class="modal-footer justify-content-between">
                <button class="btn btn-text btn-outline-secondary" onclick="hideDialog('autoGenerateWarningModal');">Cancel</button>
                <button class="btn btn-text" onclick="confirmAutoGenerate()">Continue</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="autoGenerateGroupCatModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="autoGenerateGroupCatModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-autogenerate-group-cat-size">
        <div class="modal-content">
            <div class="modal-header justify-content-between">
                <span class="modal-title" id="autoGenerateGroupCatModalLabel"><i class="icon-auto icon-white"></i>Generate Groups</span>
                <span class="btn btn-transparent" onclick="hideDialog('autoGenerateGroupCatModal');"><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">Level Groups:</td>
                        <td class="col-data-input"><input class="form-check-input" type="checkbox" tabindex="0" id="autoGenerateLevel"></td>
                    </tr>
                    <tr class="row-data">
                        <td class="col-data-label">Source Groups:</td>
                        <td class="col-data-input"><input class="form-check-input" type="checkbox" tabindex="1" id="autoGenerateSource"></td>
                    </tr>
                    <tr class="row-data">
                        <td class="col-data-label">Destination Groups:</td>
                        <td class="col-data-input"><input class="form-check-input" type="checkbox" tabindex="2" id="autoGenerateDestination"></td>
                    </tr>
                </table>
            </div>
            <div class="modal-footer justify-content-between">
                <button class="btn btn-text btn-outline-secondary" tabindex="4" onclick="hideDialog('autoGenerateGroupCatModal');">Cancel</button>
                <button class="btn btn-text" tabindex="3" onclick="autoGenerateGroupCategory()">Apply</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="addGroupCatModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="addGroupCatModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-group-cat-size">
        <div class="modal-content">
            <div class="modal-header justify-content-between">
                <span class="modal-title" id="addGroupCatModalLabel"><i class="icon-add icon-white"></i>Add Group Category</span>
                <span class="btn btn-transparent" onclick="hideDialog('addGroupCatModal');"><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-data-label-60">Name:</td>
                        <td class="col-data-input"><input class="form-control rounded-0 name-size" name="addGroupCatName" tabindex="0" id="addGroupCatName"></input></td>
                    </tr>
                </table>
                <div class="modal-footer justify-content-between">
                    <button class="btn btn-text btn-outline-secondary" tabindex="2" onclick="hideDialog('addGroupCatModal');">Cancel</button>
                    <button class="btn btn-text" tabindex="1" onclick="addGroupCategory()">Apply</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="renameGroupCatModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="renameGroupCatModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-group-cat-size">
        <div class="modal-content">
            <div class="modal-header justify-content-between">
                <span class="modal-title" id="renameGroupCatModalLabel"><i class="icon-rename icon-white"></i>Rename Group Category</span>
                <span class="btn btn-transparent" onclick="hideDialog('renameGroupCatModal');"><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-data-label-60">Rename:</td>
                        <td class="col-data-input"><input class="form-control rounded-0 name-size" name="renameGroupCatName" tabindex="0" id="renameGroupCatName"></input></td>
                    </tr>
                </table>
                <div class="modal-footer justify-content-between">
                    <button class="btn btn-text btn-outline-secondary" tabindex="2" onclick="hideDialog('renameGroupCatModal');">Cancel</button>
                    <button class="btn btn-text" tabindex="1" onclick="renameGroupCategory()">Apply</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="moveGroupCategoryModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="moveGroupCategoryModalLabel"aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-move-group-category-size">
        <div class="modal-content">
            <div class="modal-header justify-content-between">
                <span class="modal-title" id="moveGroupCategoryModalLabel"><i class="icon-move icon-white"></i>Move Group Category</span>
                <span class="btn btn-transparent" onclick="hideDialog('moveGroupCategoryModal');"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body">
                <div class="container-data">
                    <div class="grid-wrapper-move-group-cat" id="groupMoveTable">
                        <div id="groupMoveGrid" style="height: 100%;" class="ag-theme-balham-dark"></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer justify-content-between">
                <button class="btn btn-text btn-outline-secondary" tabindex="1" onclick="hideDialog('moveGroupCategoryModal');">Cancel</button>
                <button class="btn btn-text" tabindex="0" onclick="moveGroupCategory()">Apply</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="removeGroupCategoryModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog"
     aria-labelledby="removeGroupCategoryModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-remove-category-size">
        <div class="modal-content">
            <div class="modal-header info-header justify-content-between">
                <span class="modal-title" id="removeGroupCategoryModalLabel"><i class="icon-delete icon-white"></i>Confirm Delete Group Category</span>
                <span class="btn btn-transparent" onclick="hideDialog('removeGroupCategoryModal');"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body">
                <p class="container-data">Are you sure you want to delete the selected Group Category(s)?</p>
            </div>
            <div class="modal-footer justify-content-between">
                <button class="btn btn-text btn-outline-secondary" tabindex="1" onclick="hideDialog('removeGroupCategoryModal');">Cancel</button>
                <button class="btn btn-text" tabindex="0" onclick="removeGroupCatRows()">Apply</button>
            </div>
        </div>
    </div>
</div>

{{ end }}