const vt = virtualTable({
            tableEl: document.querySelector('#rbacUsersTable'),
            data: [],
            rowHeight: 20,
            buffer: 5,
            groupKey: 'ObjectSourceName',    // optional zum Gruppieren
            rowKey: 'ObjectGUID',
            filterConfig: {
                exceptedColumns: ['Status_ID', 'Anhänge'],
                columnModes: {
                    ID: 'text', Status: 'dropdown', Objekt: 'text', Priorität: 'dropdown',
                    Erstelldatum: 'text', Gewerk: 'dropdown', Typ: 'dropdown',
                    Bedarfsmelder: 'text', Bearbeiter: 'text', Genehmiger: 'text',
                    Status: 'dropdown'
                }
            },
            customRender: (row, tr) => {
            
                createTd(tr, 
                    `<button class="redbutton" 
                        ${row['ObjectGUID'] === '00000000-0000-0000-0000-000000000001' ? 
                            'disabled data-tooltip="Der Administrator kann nicht gelöscht werden"' : 
                            ''
                        }>X</button>`, { 
                    styles: { 
                        'position': 'sticky', 
                        'left': '0px', 
                        'width': '20px', 
                        'z-index': '2'
                    }, classes: [ 
                        'text-align:left' 
                    ], onclick: () => {
                        sendUserEvent('RBAC', `Benutzer ${row['sn'][0].toUpperCase() + row['sn'].slice(1)}, ${row['givenName'][0].toUpperCase() + row['givenName'].slice(1)} gelöscht`, null, 3);
                    } 
                });

                createTd(tr, row['ObjectGUID'], { classes: [ 'text-align:left' ], styles: { 'max-width': '100px' }, attributes: { 'data-tooltip': row['ObjectGUID'] } });
                createTd(tr, row['sAMAccountName'], { classes: [ 'text-align:left' ], attributes: { 'data-tooltip': row['sAMAccountName'] } });
                createTd(tr, row['sn'], { classes: [ 'text-align:left' ], attributes: { 'data-tooltip': row['sn'] } });
                createTd(tr, row['givenName'], { classes: [ 'text-align:left' ], attributes: { 'data-tooltip': row['givenName'] } });
                createTd(tr, row['mail'], { classes: [ 'text-align:left' ], attributes: { 'data-tooltip': row['mail'] } });
                createTd(tr, row['active'], { classes: [ 'text-align:center' ] });
                createTd(tr, row['online'], { classes: [ 'text-align:center' ] });
                createTd(tr, row['RoleCount'], { classes: [ 'text-align:center' ] });
                createTd(tr, row['GroupCount'], { classes: [ 'text-align:center' ] });
                createTd(tr, row['ObjectSourceName'], { classes: [ 'text-align:right' ] });
            }
        });


async function api(url, method = 'GET', body) {
  const res = await fetch(url, {
    method,
    headers: { 'Content-Type': 'application/json' },
    body: body ? JSON.stringify(body) : undefined
  });

  return res.json();
}

async function createUser() {
  const name = document.getElementById('newUserName').value;
    const sn = name.split('.')[1];
    const givenName = name.split('.')[0];
    const mail = `${name}@test.com`;

  const user = await api('/api/rbac/auth/create', 'POST', {
    sAMAccountName: name,
    mail: mail,
    sn: sn[0].toUpperCase() + sn.slice(1),
    givenName: givenName[0].toUpperCase() + givenName.slice(1)
  });
  if(user) {
    sendUserEvent('RBAC', `Benutzer ${sn[0].toUpperCase() + sn.slice(1)}, ${givenName[0].toUpperCase() + givenName.slice(1)} angelegt`, null, 0);
    loadUsers();
  }
}


async function loadUsers() {
  try {
    const users = await api('/api/rbac/auth/get', 'POST');
    if(users) {
        vt.source(users);
        return;
    }
    sendUserEvent('RBAC', 'Benutzer konnten nicht geladen', null, 4);
  } catch(err) {
    writeEventLog(4, 'RBAC', err);
  }
}


async function createGroup() {
  const name = document.getElementById('newGroupName').value;
  const group = await api('/api/rbac/group/create', 'POST', {
    name
  });
 if(group) {
    sendUserEvent('RBAC', `Gruppe ${name} angelegt`, null, 0);
    loadGroups();
  }
}
// HIER WEITER - GRUPPEN KARTEN MÜSSEN HÜBSCHER WERDEN. 
// BENUTZER UND GRUPPEN KÖNNEN NOCH NICHT GELÖSCHT WERDEN. 
// GRUPPEN AUCH OBJECTSOURCE_ID 1?
async function loadGroups() {
   try {
    const rbacGroupContainer = document.getElementById('rbacGroupContainer');
    rbacGroupContainer.innerHTML = '';
    const groups = await api('/api/rbac/group/get', 'POST');
    if(groups) {
        let fragment = document.createDocumentFragment();
        groups.forEach(group => {
          const section = document.createElement('section');
          section.innerHTML = `<span>${group.Name}</span><div class="removeButton" onclick="this.parentNode.remove()">X</div>`;
          section.dataset.tooltip = group.Name;
          fragment.appendChild(section);
        });
        rbacGroupContainer.innerHTML = '';
        rbacGroupContainer.appendChild(fragment);
        return;
    }
    sendUserEvent('RBAC', 'Gruppen konnten nicht geladen', null, 4);
  } catch(err) {
    writeEventLog(4, 'RBAC', err);
  }
}

loadUsers();
loadGroups();

async function createRole() {
  const name = document.getElementById('newRoleName').value;

  await api('/api/role', 'POST', {
    name
  });

  loadRoles();
}

async function loadRoles() {
  document.getElementById('roleList').innerHTML = 'Reload roles...';
}


async function createPermission() {
  const scope = document.getElementById('permScope').value;
  const resource = document.getElementById('permResource').value;
  const action = document.getElementById('permAction').value;

  await api('/permission', 'POST', {
    scope,
    resource,
    action
  });

  alert('Permission created');
}


async function addUserToGroup(authId, groupId) {
  await api('/api/rbac/group/add-user', 'POST', {
    authId,
    groupId
  });
}


async function addPermissionToRole(roleId, permissionId) {
  await api('/role/add-permission', 'POST', {
    roleId,
    permissionId
  });
}