@let providerId = providerId$ | async;
@let bulkMenuOptions = bulkMenuOptions$ | async;
@let showConfirmBanner = showConfirmBanner$ | async;
@let dataSource = this.dataSource();
@let isProcessing = this.isProcessing();
@let isSingleInvite = isSingleInvite$ | async;

<app-header>
  <bit-search class="tw-grow" [formControl]="searchControl" [placeholder]="'searchMembers' | i18n">
  </bit-search>
  <button
    type="button"
    bitButton
    buttonType="primary"
    (click)="edit(providerId)"
    startIcon="bwi-plus"
  >
    {{ "inviteMember" | i18n }}
  </button>
</app-header>

<div class="tw-mb-4 tw-flex tw-flex-col tw-space-y-4">
  <bit-toggle-group
    [selected]="status"
    (selectedChange)="statusToggle.next($event)"
    [label]="'memberStatusFilter' | i18n"
  >
    <bit-toggle [value]="undefined">
      {{ "all" | i18n }}
      <bit-berry [value]="dataSource.activeUserCount"></bit-berry>
    </bit-toggle>
    <bit-toggle [value]="userStatusType.Invited">
      {{ "invited" | i18n }}
      <bit-berry [value]="dataSource.invitedUserCount"></bit-berry>
    </bit-toggle>
    <bit-toggle [value]="userStatusType.Accepted">
      {{ "needsConfirmation" | i18n }}
      <bit-berry [value]="dataSource.acceptedUserCount"></bit-berry>
    </bit-toggle>
  </bit-toggle-group>
</div>

@if (!firstLoaded()) {
  <i
    class="bwi bwi-spinner bwi-spin tw-text-muted"
    title="{{ 'loading' | i18n }}"
    aria-hidden="true"
  >
  </i>
  <span class="tw-sr-only">{{ "loading" | i18n }}</span>
} @else {
  @if (!dataSource.filteredData?.length) {
    <p>{{ "noMembersInList" | i18n }}</p>
  }
  @if (dataSource.filteredData?.length) {
    @if (showConfirmBanner) {
      <bit-callout type="info" title="{{ 'confirmUsers' | i18n }}" icon="bwi-check-circle">
        {{ "providerUsersNeedConfirmed" | i18n }}
      </bit-callout>
    }
    <cdk-virtual-scroll-viewport bitScrollLayout [itemSize]="rowHeight" class="tw-pb-8">
      <bit-table [dataSource]="dataSource">
        <ng-container header>
          <tr>
            <th bitCell class="tw-w-20">
              <input
                type="checkbox"
                bitCheckbox
                (change)="dataSource.checkAllFilteredUsers($any($event.target).checked)"
                [attr.aria-label]="'selectAll' | i18n"
              />
            </th>
            <th bitCell bitSortable="email" default>{{ "name" | i18n }}</th>
            <th bitCell bitSortable="type">{{ "role" | i18n }}</th>
            <th bitCell class="tw-w-10">
              <button
                [bitMenuTriggerFor]="headerMenu"
                type="button"
                bitIconButton="bwi-ellipsis-v"
                size="small"
                label="{{ 'options' | i18n }}"
              ></button>
              <bit-menu #headerMenu>
                @if (bulkMenuOptions.showBulkReinviteUsers) {
                  <button
                    type="button"
                    bitMenuItem
                    (click)="isProcessing ? null : bulkReinvite(providerId)"
                  >
                    <i class="bwi bwi-fw bwi-envelope" aria-hidden="true"></i>
                    {{ (isSingleInvite ? "resendInvitation" : "reinviteSelected") | i18n }}
                  </button>
                }
                @if (bulkMenuOptions.showBulkConfirmUsers) {
                  <button
                    type="button"
                    bitMenuItem
                    (click)="isProcessing ? null : bulkConfirm(providerId)"
                  >
                    <span class="tw-text-success">
                      <i class="bwi bwi-fw bwi-check" aria-hidden="true"></i>
                      {{ "confirmSelected" | i18n }}
                    </span>
                  </button>
                }
                <button
                  type="button"
                  bitMenuItem
                  variant="danger"
                  (click)="isProcessing ? null : bulkRemove(providerId)"
                >
                  <bit-icon name="bwi-close" slot="start" />
                  {{ "remove" | i18n }}
                </button>
              </bit-menu>
            </th>
          </tr>
        </ng-container>
        <ng-template body let-rows$>
          <tr
            bitRow
            *cdkVirtualFor="let user of rows$"
            alignContent="middle"
            [ngClass]="rowHeightClass"
          >
            <td bitCell (click)="dataSource.checkUser(user)">
              <input type="checkbox" bitCheckbox [(ngModel)]="$any(user).checked" />
            </td>
            <td bitCell (click)="edit(providerId, user)" class="tw-cursor-pointer">
              <div class="tw-flex tw-items-center">
                <bit-avatar
                  [text]="user | userName"
                  [id]="user.userId"
                  [color]="user.avatarColor"
                  class="tw-mr-3"
                ></bit-avatar>
                <div class="tw-flex tw-flex-col">
                  <div class="tw-flex tw-flex-row tw-gap-2">
                    <button type="button" bitLink>
                      {{ user.name ?? user.email }}
                    </button>
                    @if (user.status === userStatusType.Invited) {
                      <span bitBadge class="tw-text-xs" variant="secondary">
                        {{ "invited" | i18n }}
                      </span>
                    }
                    @if (user.status === userStatusType.Accepted) {
                      <span bitBadge class="tw-text-xs" variant="warning">
                        {{ "needsConfirmation" | i18n }}
                      </span>
                    }
                    @if (user.status === userStatusType.Revoked) {
                      <span bitBadge class="tw-text-xs" variant="secondary">
                        {{ "revoked" | i18n }}
                      </span>
                    }
                  </div>
                  @if (user.name) {
                    <div class="tw-text-sm tw-text-muted">
                      {{ user.email }}
                    </div>
                  }
                </div>
              </div>
            </td>
            <td bitCell class="tw-text-muted">
              @if (user.type === userType.ProviderAdmin) {
                <span>{{ "providerAdmin" | i18n }}</span>
              }
              @if (user.type === userType.ServiceUser) {
                <span>{{ "serviceUser" | i18n }}</span>
              }
            </td>
            <td bitCell>
              <button
                [bitMenuTriggerFor]="rowMenu"
                type="button"
                bitIconButton="bwi-ellipsis-v"
                size="small"
                label="{{ 'options' | i18n }}"
              ></button>
              <bit-menu #rowMenu>
                @if (user.status === userStatusType.Invited) {
                  <button
                    type="button"
                    bitMenuItem
                    (click)="isProcessing ? null : reinvite(user, providerId)"
                  >
                    <i aria-hidden="true" class="bwi bwi-envelope"></i>
                    {{ "resendInvitation" | i18n }}
                  </button>
                }
                @if (user.status === userStatusType.Accepted) {
                  <button
                    type="button"
                    bitMenuItem
                    (click)="isProcessing ? null : confirm(user, providerId)"
                  >
                    <span class="tw-text-success">
                      <i class="bwi bwi-fw bwi-check" aria-hidden="true"></i>
                      {{ "confirm" | i18n }}
                    </span>
                  </button>
                }
                @if (accessEvents && user.status === userStatusType.Confirmed) {
                  <button
                    type="button"
                    bitMenuItem
                    (click)="isProcessing ? null : openEventsDialog(user, providerId)"
                  >
                    <i class="bwi bwi-fw bwi-file-text" aria-hidden="true"></i>
                    {{ "eventLogs" | i18n }}
                  </button>
                }
                <button
                  type="button"
                  bitMenuItem
                  variant="danger"
                  (click)="isProcessing ? null : remove(user, providerId)"
                >
                  <bit-icon fixedWidth name="bwi-close" slot="start" />
                  {{ "remove" | i18n }}
                </button>
              </bit-menu>
            </td>
          </tr>
        </ng-template>
      </bit-table>
    </cdk-virtual-scroll-viewport>
  }
}