{{ define "profileconfig" }}
<link href="/static/css/pages/user-profile.css" rel="stylesheet">
<script src="/static/js/user-profile-helpers.js"></script>

    <div class="row container-data container-profile-data">
        <div class="col profile-data-table" >
            <div class="grid-wrapper-panel-logical-ends">
                <div id="availableConfigGrid" style="height:100%;width:100%;" class="ag-theme-balham-dark"></div>
            </div>
        </div>
        <div class="row-center data-transfer-center-column">
            <div class="row row-center shift-down-25">
                <button class="btn btn-assign-icon" id="assignConfigButton" onclick="onProfileConfigAssignChanged(availableConfigOptions, 'addconfig')"><i class="icon-assign" id="assignConfigImg"></i></button>
                <button class="btn btn-assign-icon" id="unassignConfigButton" onclick="onProfileConfigAssignChanged(assignedConfigOptions, 'removeconfig')"><i class="icon-unassign" id="unassignConfigImg"></i></button>
            </div>
        </div>
        <div class="col profile-data-table">
            <div class="grid-wrapper-panel-logical-ends">
                <div id="assignedConfigGrid" style="height:100%;width:100%;" class="ag-theme-balham-dark"></div>
            </div>
        </div>
    </div>

    <script type="text/javascript" charset="utf-8">
        let availableConfigData;
        let assignedConfigData;
        let rowDataExpand = [];
        let availableExpandMap = new Map();
        let assignedExpandMap = new Map();

        const availableConfigColumnDefs = [
            {field: "Id", hide: true},
            {field: "ChildId", hide: true},
            {field: "Name", headerName: "Available", suppressMovable: true, cellRenderer: "cellRenderer"},
            {field: "ConfigUrl", hide: true},
            {field: "IconUrl", hide: true},
            {field: "ParentChildId", hide: true},
        ];

        const assignedConfigColumnDefs = [
            {field: "Id", hide: true},
            {field: "ChildId", hide: true},
            {field: "Name", headerName: "Assigned", suppressMovable: true, cellRenderer: "cellRenderer"},
            {field: "ConfigUrl", hide: true},
            {field: "IconUrl", hide: true},
            {field: "ParentChildId", hide: true},
        ];

        let configDefaultColDef = {
            resizable: true,
            sortable: true,
            flex: 1,
        }

        var availableConfigOptions = {
            defaultColDef: configDefaultColDef,
            columnDefs: availableConfigColumnDefs,
            suppressMenuHide: true,
            suppressDragLeaveHidesColumns: true,
            components: {cellRenderer: availableConfigCellRenderer},
            animateRows: true,
            headerHeight: 36,
            rowHeight: 31,
            rowSelection: 'multiple',
        };

        var assignedConfigOptions = {
            defaultColDef: configDefaultColDef,
            columnDefs: assignedConfigColumnDefs,
            suppressMenuHide: true,
            components: {cellRenderer: assignedConfigCellRenderer},
            animateRows: true,
            headerHeight: 36,
            rowHeight: 31,
            rowSelection: 'multiple',
        };

        document.addEventListener('DOMContentLoaded', function () {// setup the grids after the page has finished loading
            var availableConfig = document.querySelector('#availableConfigGrid');
            new agGrid.Grid(availableConfig, availableConfigOptions);
            var assignedConfig = document.querySelector('#assignedConfigGrid');
            new agGrid.Grid(assignedConfig, assignedConfigOptions);
        });

        function refreshAvailableProfileTree(isReset) {
            let firstSelectedNodeIndex = getFirstSelectedNodeIndex(availableConfigOptions);
            let selectedProfileId = sessionStorage.getItem("profileEditId");
            fetch('/profile/config/availableagdata?id=' + selectedProfileId)
                .then((response) => response.json())
                .then((data) => {
                    if(isReset) {
                        availableExpandMap.clear();
                    }
                    if (!data) {
                        availableConfigOptions.api.setRowData([]);
                    } else {
                        rowDataExpand = [];
                        availableConfigData = data;
                        makeConfigDataBFS(availableConfigData, 0, availableExpandMap);
                        availableConfigOptions.api.setRowData(rowDataExpand);
                        setNodeSelected(availableConfigOptions, firstSelectedNodeIndex);
                    }
            });
        }

        function refreshProfileTreesAfterRemove() {
            let selectedProfileId = sessionStorage.getItem("profileEditId");
           fetch('/profile/config/availableagdata?id=' + selectedProfileId)
               .then((response) => response.json())
               .then((data) => {
                    if (!data) {
                        availableConfigOptions.api.setRowData([]);
                    } else {
                        const selectedNodes = assignedConfigOptions.api.getSelectedNodes();
                        let rowId = selectedNodes[0].data.Id;
                        let parentId = rowId;
                        do {
                            assignedConfigOptions.api.forEachNode((node) => {
                                if (node.data.Id == parentId) {
                                    parentId = node.data.ParentId;
                                }
                            });
                            availableExpandMap.set(parentId, true);
                        } while (parentId)
                        rowDataExpand = [];
                        availableConfigData = data;
                        makeConfigDataBFS(availableConfigData, 0, availableExpandMap);
                        availableConfigOptions.api.setRowData(rowDataExpand);
                        availableConfigOptions.api.forEachNode((node) => {
                            if (node.data.Id == rowId) {
                                node.setSelected(true, true);
                                availableConfigOptions.api.ensureNodeVisible(node, 'middle');
                            }
                        });
                    }
                    refreshAssignedProfileTree(false);
            });
        }

        function refreshAssignedProfileTree(isReset) {
            let firstSelectedNodeIndex = getFirstSelectedNodeIndex(assignedConfigOptions);
            let selectedProfileId = sessionStorage.getItem("profileEditId");
            fetch('/profile/config/assignedagdata?id=' + selectedProfileId)
                .then((response) => response.json())
                .then((data) => {
                    if(isReset) {
                        assignedExpandMap.clear();
                    }
                    if (!data) {
                        assignedConfigOptions.api.setRowData([]);
                    } else {
                        rowDataExpand = [];
                        assignedConfigData = data;
                        makeConfigDataBFS(assignedConfigData, 0, assignedExpandMap);
                        assignedConfigOptions.api.setRowData(rowDataExpand);
                        setNodeSelected(assignedConfigOptions, firstSelectedNodeIndex);
                    }
            });
        }

        function refreshProfileTreesAfterInsert() {
            let selectedProfileId = sessionStorage.getItem("profileEditId");
            fetch('/profile/config/assignedagdata?id=' + selectedProfileId)
                .then((response) => response.json())
                .then((data) => {
                    if (!data) {
                        assignedConfigOptions.api.setRowData([]);
                    } else {
                        const selectedNodes = availableConfigOptions.api.getSelectedNodes();
                        let rowId = selectedNodes[0].data.Id;
                        let parentId = rowId;
                        do {
                            availableConfigOptions.api.forEachNode((node) => {
                                if (node.data.Id == parentId) {
                                    parentId = node.data.ParentId;
                                }
                            });
                            assignedExpandMap.set(parentId, true);
                        } while (parentId)
                        rowDataExpand = [];
                        assignedConfigData = data;
                        makeConfigDataBFS(assignedConfigData, 0, assignedExpandMap);
                        assignedConfigOptions.api.setRowData(rowDataExpand);
                        assignedConfigOptions.api.forEachNode((node) => {
                            if (node.data.Id == rowId) {
                                node.setSelected(true, true);
                                assignedConfigOptions.api.ensureNodeVisible(node, 'middle');
                            }
                        });
                    }
                    refreshAvailableProfileTree(false);
            });
        }

        function availableConfigCellRenderer() {}
        function assignedConfigCellRenderer() {}

        availableConfigCellRenderer.prototype.init = function (rowData) {
            this.eGui = document.createElement("span");
            this.eGui.style = `padding-left:${rowData.data.level}px`;
            ProfileTreeCellRenderer(rowData, this);
            this.eventListener = function () {
                updateAvailableConfigData(rowData.data.Id);
                availableConfigOptions.api.forEachNode((node) => {if (node.data.Id == rowData.data.Id) {node.setSelected(true, true);}});
            };
            this.eGui.addEventListener("click", this.eventListener);
        }

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

        function updateAvailableConfigData(id) {
            let data = recursiveFindById(availableConfigData, id);
            data.expand = !data.expand;
            availableExpandMap.set(id, data.expand);
            rowDataExpand = [];
            makeConfigDataBFS(availableConfigData, 0, availableExpandMap);
            availableConfigOptions.api.setRowData(rowDataExpand);
            availableConfigOptions.api.forEachNode((node) => {if (node.data.Id == id) {
                node.setSelected(true, true);
                availableConfigOptions.api.ensureNodeVisible(node, 'middle');
            }});
        }

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

        assignedConfigCellRenderer.prototype.init = function (rowData) {
            this.eGui = document.createElement("span");
            this.eGui.style = `padding-left:${rowData.data.level}px`;
            ProfileTreeCellRenderer(rowData, this);
            this.eventListener = function () {
                updateAssignedConfigData(rowData.data.Id);
                assignedConfigOptions.api.forEachNode((node) => {if (node.data.Id == rowData.data.Id) {node.setSelected(true, true);}});
            };
            this.eGui.addEventListener("click", this.eventListener);
        }

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

        function updateAssignedConfigData(id) {
            let data = recursiveFindById(assignedConfigData, id);
            data.expand = !data.expand;
            assignedExpandMap.set(id, data.expand);
            rowDataExpand = [];
            makeConfigDataBFS(assignedConfigData, 0, assignedExpandMap);
            assignedConfigOptions.api.setRowData(rowDataExpand);
            assignedConfigOptions.api.forEachNode((node) => {if (node.data.Id == id) {
                node.setSelected(true, true);
                assignedConfigOptions.api.ensureNodeVisible(node, 'middle');
            }});
        }

        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);
            }
        }

        // collectLeafIdsFromFolder() lives in /static/js/user-profile-helpers.js
        // so it can be unit-tested without loading the Go template.

        function onProfileConfigAssignChanged(gridOptions, urlPrefix) {
            let profileId = sessionStorage.getItem("profileEditId");
            if (!profileId) { return; }

            const selectedProfileRows = profileEditorGridOptions.api.getSelectedRows();
            if (selectedProfileRows.length !== 1) { console.error("Cannot get selected profile data"); return; }

            if (isAdminProfile(selectedProfileRows[0])) {
                displayWarningDialog("The Admin profile's configuration cannot be changed.");
                return;
            }

            if (!gridOptions || !gridOptions.api) {
                console.error("Source grid API not available for", urlPrefix); return;
            }

            let selectedConfigRows = gridOptions.api.getSelectedRows();
            if (selectedConfigRows.length === 0) {
                displayWarningDialog("Please select an item to " + (urlPrefix === 'addconfig' ? 'assign.' : 'unassign.'));
                return;
            }

            // For each selected row, use its own Id if it's a leaf (has ConfigUrl)
            // and/or every assignable descendant if it's a folder. This lets users
            // ctrl/shift-click individual rows AND/OR select a folder to move its
            // whole subtree in one action (UR-16085).
            let idSet = new Set();
            selectedConfigRows.forEach((row) => {
                if (row.ConfigUrl) { idSet.add(row.Id); }
                collectLeafIdsFromFolder(row).forEach((id) => idSet.add(id));
            });
            if (idSet.size === 0) {
                displayWarningDialog("Only specific configuration items can be assigned/unassigned.");
                return;
            }

            let ids = Array.from(idSet);
            displayDialog("LoadingModal");
            $.ajax({
                url: "/profile/" + urlPrefix + "?profileId="+ profileId +"&ids="+ ids.join(','),
                success: () => {
                    console.log(`Profile config change (${urlPrefix}) request sent.`);
                },
                error: (err) => {
                    displayErrorDialog(err.responseText || `Error changing profile configuration (${urlPrefix}).`);
                }
            });
        }

        function ProfileTreeCellRenderer(rowData, cell) {
            switch (rowData.data.ChildId) {
                case "root":
                    if (rowData.data.expand || availableExpandMap.get(rowData.data.Id)) {
                        cell.eGui.innerHTML = '<i class="icon-arrow-down"></i> <i class="icon-folder-open"></i> ' + rowData.value;
                    } else {
                        cell.eGui.innerHTML = '<i class="icon-arrow-right"></i> <i class="icon-folder-close"></i> ' + rowData.value;
                    }
                    break;
                case "status":
                    cell.eGui.innerHTML = '<i class="icon-indent-level"></i> <i class="icon-monitor"></i>' + rowData.value;
                    break;
                case "system":
                    if (rowData.data.expand || availableExpandMap.get(rowData.data.Id)) {
                        cell.eGui.innerHTML = '<i class="icon-arrow-down"></i> <i class="icon-folder-system-open"></i> ' + rowData.value;
                    } else {
                        cell.eGui.innerHTML = '<i class="icon-arrow-right"></i> <i class="icon-folder-system-closed"></i> ' + rowData.value;
                    }
                    break;
                case "database":
                    if (rowData.data.expand || availableExpandMap.get(rowData.data.Id)) {
                        cell.eGui.innerHTML = '<i class="icon-arrow-down"></i> <i class="icon-folder-db-open"></i> ' + rowData.value;
                    } else {
                        cell.eGui.innerHTML = '<i class="icon-arrow-right"></i> <i class="icon-folder-db-close"></i> ' + rowData.value;
                    }
                    break;
                case "sysconfig":
                    if (rowData.data.expand || availableExpandMap.get(rowData.data.Id)) {
                        cell.eGui.innerHTML = '<i class="icon-arrow-down"></i> <i class="icon-folder-configuration-open"></i> ' + rowData.value;
                    } else {
                        cell.eGui.innerHTML = '<i class="icon-arrow-right"></i> <i class="icon-folder-configuration-close"></i> ' + rowData.value;
                    }
                    break;
                case "syscontrol":
                    if (rowData.data.expand || availableExpandMap.get(rowData.data.Id)) {
                        cell.eGui.innerHTML = '<i class="icon-arrow-down"></i> <i class="icon-folder-control-open"></i> ' + rowData.value;
                    } else {
                        cell.eGui.innerHTML = '<i class="icon-arrow-right"></i> <i class="icon-folder-control-close"></i> ' + rowData.value;
                    }
                    break;
                case "sysmonitoring":
                    if (rowData.data.expand || availableExpandMap.get(rowData.data.Id)) {
                        cell.eGui.innerHTML = '<i class="icon-arrow-down"></i> <i class="icon-folder-monitoring-open"></i> ' + rowData.value;
                    } else {
                        cell.eGui.innerHTML = '<i class="icon-arrow-right"></i> <i class="icon-folder-monitoring-close"></i> ' + rowData.value;
                    }
                    break;
                case "db_manager":
                    cell.eGui.innerHTML = '<i class="icon-indent-level"></i> <i class="icon-db-manager"></i> ' + rowData.value;
                    break;
                case "dbconfig":
                    if (rowData.data.expand || availableExpandMap.get(rowData.data.Id)) {
                        cell.eGui.innerHTML = '<i class="icon-arrow-down"></i> <i class="icon-folder-configuration-open"></i> ' + rowData.value;
                    } else {
                        cell.eGui.innerHTML = '<i class="icon-arrow-right"></i> <i class="icon-folder-configuration-close"></i> ' + rowData.value;
                    }
                    break;
                case "dbcontrol":
                    if (rowData.data.expand || availableExpandMap.get(rowData.data.Id)) {
                        cell.eGui.innerHTML = '<i class="icon-arrow-down"></i> <i class="icon-folder-control-open"></i> ' + rowData.value;
                    } else {
                        cell.eGui.innerHTML = '<i class="icon-arrow-right"></i> <i class="icon-folder-control-close"></i> ' + rowData.value;
                    }
                    break;
                case "panels":
                    if (rowData.data.expand || availableExpandMap.get(rowData.data.Id)) {
                        cell.eGui.innerHTML = '<i class="icon-arrow-down"></i> <i class="icon-folder-panels-open"></i> ' + rowData.value;
                    } else {
                        cell.eGui.innerHTML = '<i class="icon-arrow-right"></i> <i class="icon-folder-panels-close"></i> ' + rowData.value;
                    }
                    break;
                case "inbound_conn":
                    cell.eGui.innerHTML = '<i class="icon-indent-level"></i> <i class="icon-connections"></i> ' + rowData.value;
                    break;
                case "db_devices":
                    cell.eGui.innerHTML = '<i class="icon-indent-level"></i> <i class="icon-routing-devices"></i> ' + rowData.value;
                    break;
                case "db_levels":
                    cell.eGui.innerHTML = '<i class="icon-indent-level"></i> <i class="icon-levels"></i> ' + rowData.value;
                    break;
                case "db_destinations":
                    cell.eGui.innerHTML = '<i class="icon-indent-level"></i> <i class="icon-destinations"></i> ' + rowData.value;
                    break;
                case "db_sources":
                    cell.eGui.innerHTML = '<i class="icon-indent-level"></i> <i class="icon-sources"></i> ' + rowData.value;
                    break;
                case "db_alias":
                    cell.eGui.innerHTML = '<i class="icon-indent-level"></i> <i class="icon-aliases"></i> ' + rowData.value;
                    break;
                case "db_channelalias":
                    cell.eGui.innerHTML = '<i class="icon-indent-level"></i> <i class="icon-aliases"></i> ' + rowData.value;
                    break;
                case "db_catindex":
                    cell.eGui.innerHTML = '<i class="icon-indent-level"></i> <i class="icon-category"></i> ' + rowData.value;
                    break;
                case "db_groupcat":
                    cell.eGui.innerHTML = '<i class="icon-indent-level"></i> <i class="icon-groups"></i> ' + rowData.value;
                    break;
                case "db_salvos":
                    cell.eGui.innerHTML = '<i class="icon-indent-level"></i> <i class="icon-salvos"></i> ' + rowData.value;
                    break;
                case "db_panels":
                    cell.eGui.innerHTML = '<i class="icon-indent-level"></i> <i class="icon-panels"></i> ' + rowData.value;
                    break;
                case "db_dstfollow":
                    cell.eGui.innerHTML = '<i class="icon-indent-level"></i> <i class="icon-dest-follow"></i> ' + rowData.value;
                    break;
                case "db_users":
                    cell.eGui.innerHTML = '<i class="icon-indent-level"></i> <i class="icon-profiles"></i> ' + rowData.value;
                    break;
                case "db_uap":
                    cell.eGui.innerHTML = '<i class="icon-indent-level"></i> <i class="icon-indent-level"></i> ' + rowData.value;
                    break;
                case "mv_layout_editor":
                    cell.eGui.innerHTML = '<i class="icon-indent-level"></i> <i class="icon-layout-editor"></i> ' + rowData.value;
                    break;
                case "db_tielines":
                    cell.eGui.innerHTML = '<i class="icon-indent-level"></i> <i class="icon-tieline"></i> ' + rowData.value;
                    break;
                case "bcsmonitor":
                    cell.eGui.innerHTML = '<i class="icon-indent-level"></i> <i class="icon-alarm"></i> ' + rowData.value;
                    break;
                case "db_og_tielineRuntime":
                    cell.eGui.innerHTML = '<i class="icon-indent-level"></i> <i class="icon-tieline"></i> ' + rowData.value;
                    break;
                case "system_logs":
                    cell.eGui.innerHTML = '<i class="icon-indent-level"></i> <i class="icon-logs"></i> ' + rowData.value;
                    break;
                case "device-local-bcs":
                    cell.eGui.innerHTML = '<i class="icon-indent-level"></i> <i class="icon-device-config"></i> ' + rowData.value;
                    break;
                case "device-local-svr":
                    cell.eGui.innerHTML = '<i class="icon-indent-level"></i> <i class="icon-device-config"></i> ' + rowData.value;
                    break;
                case "device-ultripower":
                    cell.eGui.innerHTML = '<i class="icon-indent-level"></i> <i class="icon-device-config"></i> ' + rowData.value;
                    break;
                case "config-alarming":
                    cell.eGui.innerHTML = '<i class="icon-indent-level"></i> <i class="icon-alarm"></i> ' + rowData.value;
                    break;
                case "device-local-ultrix":
                    cell.eGui.innerHTML = '<i class="icon-indent-level"></i> <i class="icon-device-config"></i> ' + rowData.value;
                    break;
                case "device-mixer":
                    cell.eGui.innerHTML = '<i class="icon-indent-level"></i> <i class="icon-audio-mixer"></i> ' + rowData.value;
                    break;
                case "device-ultritouch-mixer":
                    cell.eGui.innerHTML = '<i class="icon-indent-level"></i> <i class="icon-audio-mixer"></i> ' + rowData.value;
                    break;
                case "device-door-fr12":
                    cell.eGui.innerHTML = '<i class="icon-indent-level"></i> <i class="icon-device-config"></i> ' + rowData.value;
                    break;
                case "device-door-fr30":
                    cell.eGui.innerHTML = '<i class="icon-indent-level"></i> <i class="icon-device-config"></i> ' + rowData.value;
                    break;
                case "device-power":
                    cell.eGui.innerHTML = '<i class="icon-indent-level"></i> <i class="icon-device-config"></i> ' + rowData.value;
                    break;
                case "device-control":
                    cell.eGui.innerHTML = '<i class="icon-indent-level"></i> <i class="icon-device-config"></i> ' + rowData.value;
                    break;
                case "device-local-ultricore":
                    cell.eGui.innerHTML = '<i class="icon-indent-level"></i> <i class="icon-device-config"></i> ' + rowData.value;
                    break;
                case "db_routing":
                    cell.eGui.innerHTML = '<i class="icon-indent-level"></i> <i class="icon-panels"></i> ' + rowData.value;
                    break;
                case "db_topologytielines":
                    cell.eGui.innerHTML = '<i class="icon-indent-level"></i> <i class="icon-graph"></i> ' + rowData.value;
                    break;
                default:
                    cell.eGui.innerHTML = '<i class="icon-indent-level"></i> <i class="icon-panels"></i> ' + rowData.value;
                    break;
            }
        }
    </script>
{{ end }}