import { __decorate, __metadata } from "tslib";
import '@things-factory/component-ui';
import '../../components/create-role';
import '../../components/role-edit-form';
import '../../components/role-privilege-editor';
import gql from 'graphql-tag';
import { css, html } from 'lit';
import { customElement, property, query } from 'lit/decorators.js';
import { connect } from 'pwa-helpers/connect-mixin.js';
import { client, gqlContext } from '@operato/graphql';
import { i18next } from '@operato/i18n';
import { InheritedValueType, PageView, store } from '@operato/shell';
let RoleManagement = class RoleManagement extends connect(store)(PageView) {
    constructor() {
        super(...arguments);
        this.title = '';
        this.roles = [];
    }
    get context() {
        return {
            title: i18next.t('text.role_management'),
            help: 'auth/roles'
        };
    }
    render() {
        const data = {
            roles: this.roles || []
        };
        return html `
      <create-role
        @fetch-roles=${async () => {
            this.roles = await this.fetchRoles();
        }}
      ></create-role>

      <div subtitle>${i18next.t('text.registered roles')}</div>
      <div id="roles-privileges">
        <quick-find-list
          .data="${data}"
          .openHeaderRenderer=${role => html `
            <role-edit-form .role="${role}" @roleChanged="${e => (this.updateRoleObj = e.detail)}"></role-edit-form>
          `}
          .contentRenderer="${(role, _currentTabKey) => html `
            <role-privilege-editor
              .updateRoleObj=${this.updateRoleObj || {}}
              .role=${role}
              @fetch-roles=${async () => {
            this.roles = await this.fetchRoles();
            await this.updateComplete;
            this.quickFindList.openByKey(role.id);
        }}
            ></role-privilege-editor>
          `}"
        ></quick-find-list>
      </div>
    `;
    }
    async pageUpdated(changes, lifecycle, before) {
        if (this.active) {
            this.roles = await this.fetchRoles();
            this.role = this.roles && this.roles[0];
        }
    }
    async fetchRoles() {
        const response = await client.query({
            query: gql `
        query roles($sortings: [Sorting!], $inherited: InheritedValueType) {
          roles(sortings: $sortings, inherited: $inherited) {
            items {
              id
              name
              description
              privileges {
                id
                name
              }
            }
            total
          }
        }
      `,
            variables: {
                sortings: [{ name: 'name' }],
                inherited: InheritedValueType.Include
            },
            context: gqlContext()
        });
        return response.data.roles.items;
    }
};
RoleManagement.styles = [
    css `
      :host {
        display: flex;
        flex-direction: column;
        background-color: var(--md-sys-color-background);
        padding: var(--spacing-large);
        overflow: auto;
      }

      [subtitle] {
        padding: var(--subtitle-padding);
        font: var(--subtitle-font);
        color: var(--subtitle-text-color);

        text-transform: capitalize;
      }

      input {
        display: block;
      }

      #roles-privileges {
        flex: 1;
        display: flex;
        margin-top: var(--spacing-medium);
        max-width: var(--content-container-max-width);
        flex-direction: row;
        overflow: auto;
        border-top: var(--border-dim-color);
      }
    `
];
__decorate([
    property({ type: String }),
    __metadata("design:type", String)
], RoleManagement.prototype, "title", void 0);
__decorate([
    property({ type: Object }),
    __metadata("design:type", Object)
], RoleManagement.prototype, "role", void 0);
__decorate([
    property({ type: Array }),
    __metadata("design:type", Array)
], RoleManagement.prototype, "roles", void 0);
__decorate([
    property({ type: Object }),
    __metadata("design:type", Object)
], RoleManagement.prototype, "updateRoleObj", void 0);
__decorate([
    query('quick-find-list'),
    __metadata("design:type", Object)
], RoleManagement.prototype, "quickFindList", void 0);
RoleManagement = __decorate([
    customElement('role-management')
], RoleManagement);
//# sourceMappingURL=role-management.js.map