import { Component, h, Host, State } from '@stencil/core';
import { Subscription } from 'rxjs';
import { getOrError } from '../../../../utils';
import benefitsAppQuery from '../../store/benefits-app.query';
import roleManagementService from './role-management.service';
import roleManagementQuery from './store/role-management.query';
import roleManagementStore from './store/role-management.store';
export class RoleManagementPage {
  constructor() {
    this.showRemoveConfirmDialog = false;
    this.storeSubscription = new Subscription();
  }
  async componentWillLoad() {
    roleManagementStore.reset();
    this.storeSubscription.add(benefitsAppQuery.signedInUser$.subscribe((user) => {
      this.user = getOrError(user);
    }));
    await roleManagementService.getEditorProfiles();
    this.storeSubscription.add(roleManagementQuery.showRemoveEditorDialog$.subscribe((state) => (this.showRemoveConfirmDialog = state)));
  }
  disconnectedCallback() {
    this.storeSubscription.unsubscribe();
  }
  render() {
    return (h(Host, { class: "w-100" },
      h("ap-ben-ui-container", { class: "w-100 d-none py-5" },
        h("div", { class: "d-flex align-items-start flex-column" },
          h("h3", null, "Access Management"),
          h("div", { class: "mt-3" },
            h("h4", null, "Permissions")),
          h("div", null, "Manage which staff has permission to edit and manage benefits.")),
        h("div", { class: "mt-4" },
          h("ap-ben-role-owner-section", { owner: this.user })),
        h("div", { class: "mt-4" },
          h("ap-ben-role-editors-section", null))),
      this.renderRemoveConfirmDialog()));
  }
  renderRemoveConfirmDialog() {
    return (h("ap-ben-modal-section", { show: this.showRemoveConfirmDialog, showHeader: true, modalTitle: "Remove editor", onModalClosed: (_) => roleManagementStore.showRemoveEditorDialog(false) },
      h("ap-ben-confirm-dialog", { acceptText: "Remove", declineText: "Cancel", dialogStyle: "danger", onAccepted: (_) => roleManagementService.removeSelectedEditor(), onDeclined: (_) => roleManagementStore.showRemoveEditorDialog(false) },
        h("p", null,
          h("b", null, "Are you sure you want to remove this person?")),
        h("p", null, "If you proceed, this person will not be able to edit or manage benefits anymore."))));
  }
  static get is() { return "ap-ben-role-management-page"; }
  static get states() { return {
    "showRemoveConfirmDialog": {},
    "user": {}
  }; }
}
