import{LitElement as e,html as t,css as i}from"lit";import{classMap as r}from"lit/directives/class-map.js";import{createRef as s,ref as a}from"lit/directives/ref.js";import{repeat as m}from"lit/directives/repeat.js";import{iconRemixInformationFill as o}from"./assets/cc-remix.icons.js";import{LostFocusController as n}from"./controllers/lost-focus-controller.js";import{getDocUrl as l}from"./lib/dev-hub-url.js";import{formSubmit as c}from"./lib/form/form-submit-directive.js";import{Validation as d}from"./lib/form/validation.js";import{i18n as b}from"./translation.js";import"./cc-badge.js";import"./cc-block-section.js";import"./cc-block.js";import"./cc-button.js";import"./cc-input-text.js";import"./cc-link.js";import"./cc-loader.js";import"./cc-notice.js";import{CcOrgaMemberLeaveEvent as g}from"./components/cc-orga-member-card/cc-orga-member-card.events.js";import{CcOrgaMemberCard as h}from"./cc-orga-member-card.js";import"./cc-select.js";import{CcOrgaMemberInviteEvent as p}from"./components/cc-orga-member-list/cc-orga-member-list.events.js";const u=l("/account/administrate-organization");class f extends e{static get properties(){return{authorisations:{type:Object},inviteMemberFormState:{type:Object,attribute:!1},memberListState:{type:Object,attribute:!1}}}static get INIT_AUTHORISATIONS(){return{invite:!1,edit:!1,delete:!1}}constructor(){super(),this.authorisations=f.INIT_AUTHORISATIONS,this.inviteMemberFormState={type:"idle"},this.memberListState={type:"loading"},this._inviteMemberFormRef=s(),this._memberListHeadingRef=s(),this._noResultMessageRef=s(),new n(this,"cc-orga-member-card",(({suggestedElement:e})=>{null==e&&null!=this._noResultMessageRef.value?this._noResultMessageRef.value.focus():null==e?this._memberListHeadingRef.value.focus():e instanceof h&&e.focusDeleteBtn()})),this._memberEmailValidator={validate:(e,t)=>("loaded"===this.memberListState.type?this.memberListState.memberList.map((e=>e.email)):[]).includes(e)?d.invalid("duplicate"):d.VALID},this._memberEmailErrorMessages={duplicate:b("cc-orga-member-list.invite.email.error-duplicate")}}resetInviteMemberForm(){this._inviteMemberFormRef.value?.reset()}isLastAdmin(e){const t="ADMIN"===e.role;return 1===this._getAdminList().length&&t}_getAdminList(){return"loaded"===this.memberListState.type?this.memberListState.memberList.filter((e=>"ADMIN"===e.role)):[]}_getRoleOptions(){return[{value:"ADMIN",label:b("cc-orga-member-list.invite.role.admin")},{value:"DEVELOPER",label:b("cc-orga-member-list.invite.role.developer")},{value:"ACCOUNTING",label:b("cc-orga-member-list.invite.role.accounting")},{value:"MANAGER",label:b("cc-orga-member-list.invite.role.manager")}]}_getSortedFilteredMemberList(e,t,i){const r=t?.trim().toLowerCase();return e.filter((e=>{const t=""===r||e.name?.toLowerCase().includes(r)||e.email.toLowerCase().includes(r),s=!i||!e.isMfaEnabled;return t&&s})).sort(((e,t)=>e.isCurrentUser?-1:t.isCurrentUser?1:e.email.localeCompare(t.email,[],{sensitivity:"base"})))}_onFilterIdentity({detail:e}){"loaded"===this.memberListState.type&&(this.memberListState={...this.memberListState,identityFilter:e})}_onFilterMfaDisabledOnly(){"loaded"===this.memberListState.type&&(this.memberListState={...this.memberListState,mfaDisabledOnlyFilter:!this.memberListState.mfaDisabledOnlyFilter})}_onInviteMember(e){this.dispatchEvent(new p({email:e.email,role:e.role}))}_onLeaveFromCard(e){const{detail:t}=e;"loaded"===this.memberListState.type&&this.isLastAdmin(t)&&(this.memberListState={...this.memberListState,memberList:this.memberListState.memberList.map((e=>e.id===t.id?{...e,error:!0}:{...e}))},e.stopPropagation())}_onLeaveFromDangerZone(){if("loaded"===this.memberListState.type){const e=this.memberListState.memberList.find((e=>e.isCurrentUser));this.isLastAdmin(e)?this.memberListState={...this.memberListState,dangerZoneState:"error"}:this.dispatchEvent(new g({id:e.id,email:e.email,role:e.role,name:e.name,avatar:e.avatar,jobTitle:e.jobTitle,isMfaEnabled:e.isMfaEnabled,isCurrentUser:e.isCurrentUser}))}}_onUpdateFromCard(e){const{detail:t}=e,i=t.isCurrentUser&&this.isLastAdmin(t);"loaded"===this.memberListState.type&&i&&(this.memberListState={...this.memberListState,memberList:this.memberListState.memberList.map((e=>e.id===t.id?{...e,error:!0}:{...e}))},e.stopPropagation())}_onToggleCardEditing({detail:{memberId:e,newState:t}}){"loaded"===this.memberListState.type&&(this.memberListState={...this.memberListState,memberList:this.memberListState.memberList.map((i=>i.id===e?{...i,type:t}:{...i,type:"loaded"}))})}willUpdate(e){if(!e.has("memberListState")||"loaded"!==this.memberListState.type)return;const t=this._getAdminList(),i="error"===this.memberListState.dangerZoneState;t.length>1&&(this.memberListState={...this.memberListState,memberList:this.memberListState.memberList.map((e=>({...e,error:!1})))}),t.length>1&&i&&(this.memberListState={...this.memberListState,dangerZoneState:"idle"})}render(){return t`
      <cc-block>
        <div slot="header-title">${b("cc-orga-member-list.main-heading")}</div>

        ${this.authorisations.invite?this._renderInviteForm():""}

        <cc-block-section slot="content-body">
          <div slot="title" ${a(this._memberListHeadingRef)} tabindex="-1">
            ${b("cc-orga-member-list.list.heading")}
            ${"loaded"===this.memberListState.type?t`
                  <cc-badge class="member-count" weight="dimmed" intent="neutral" circle
                    >${this.memberListState.memberList.length}</cc-badge
                  >
                `:""}
          </div>

          ${"loading"===this.memberListState.type?t` <cc-loader></cc-loader> `:""}
          ${"loaded"===this.memberListState.type?this._renderMemberList(this.memberListState.memberList,this.memberListState.identityFilter,this.memberListState.mfaDisabledOnlyFilter):""}
          ${"error"===this.memberListState.type?t` <cc-notice intent="warning" message="${b("cc-orga-member-list.error")}"></cc-notice> `:""}
        </cc-block-section>

        ${"loaded"===this.memberListState.type?this._renderDangerZone(this.memberListState):""}

        <div slot="footer-right">
          <cc-link href="${u}" .icon="${o}">
            ${b("cc-orga-member-list.documentation.text")}
          </cc-link>
        </div>
      </cc-block>
    `}_renderInviteForm(){const e="inviting"===this.inviteMemberFormState.type;return t`
      <cc-block-section slot="content-body">
        <div slot="title">${b("cc-orga-member-list.invite.heading")}</div>
        <p class="info">${b("cc-orga-member-list.invite.info")}</p>

        <form class="invite-form" ${a(this._inviteMemberFormRef)} ${c(this._onInviteMember.bind(this))}>
          <cc-input-text
            name="email"
            label=${b("cc-orga-member-list.invite.email.label")}
            required
            type="email"
            .customValidator=${this._memberEmailValidator}
            .customErrorMessages=${this._memberEmailErrorMessages}
            ?readonly=${e}
          >
            <p slot="help">${b("cc-orga-member-list.invite.email.format")}</p>
          </cc-input-text>

          <cc-select
            name="role"
            label=${b("cc-orga-member-list.invite.role.label")}
            .options=${this._getRoleOptions()}
            reset-value="DEVELOPER"
            value="DEVELOPER"
            required
            ?disabled=${e}
          >
          </cc-select>

          <div class="submit">
            <cc-button primary ?waiting=${e} type="submit">
              ${b("cc-orga-member-list.invite.submit")}
            </cc-button>
          </div>
        </form>
      </cc-block-section>
    `}_renderMemberList(e,i,s){const o=this._getSortedFilteredMemberList(e,i,s),n=0===o.length;return t`
      <div class="filters">
        <cc-input-text
          label=${b("cc-orga-member-list.filter.name")}
          .value=${i}
          @cc-input=${this._onFilterIdentity}
        ></cc-input-text>
        <label class="filters__mfa" for="filter-mfa">
          <input
            id="filter-mfa"
            type="checkbox"
            @change=${this._onFilterMfaDisabledOnly}
            .checked=${s}
          />
          ${b("cc-orga-member-list.filter.mfa")}
        </label>
      </div>

      <div class="member-list">
        ${m(o,(e=>e.id),(e=>t`
            <cc-orga-member-card
              class=${r({editing:"editing"===e.type})}
              .authorisations=${{edit:this.authorisations.edit,delete:this.authorisations.delete}}
              .state=${e}
              @cc-orga-member-leave=${this._onLeaveFromCard}
              @cc-orga-member-edit-toggle=${this._onToggleCardEditing}
              @cc-orga-member-update=${this._onUpdateFromCard}
            ></cc-orga-member-card>
          `))}
        ${n?t`
              <p class="no-result-error" ${a(this._noResultMessageRef)} tabindex="-1">
                ${b("cc-orga-member-list.no-result")}
              </p>
            `:""}
      </div>
    `}_renderDangerZone(e){return t`
      <cc-block-section slot="content-body">
        <div slot="title" class="danger">${b("cc-orga-member-list.leave.heading")}</div>
        <div class="leave">
          <p class="leave__text">${b("cc-orga-member-list.leave.text")}</p>
          <cc-button
            danger
            outlined
            @cc-click=${this._onLeaveFromDangerZone}
            ?disabled="${"error"===e.dangerZoneState}"
            ?waiting="${"leaving"===e.dangerZoneState}"
            >${b("cc-orga-member-list.leave.btn")}</cc-button
          >
        </div>
        <!-- a11y: we need the live region to be present within the DOM from the start and insert content dynamically inside it. -->
        <div class="wrapper-leave-error" aria-live="polite" aria-atomic="true">
          ${"error"===e.dangerZoneState?t`
                <div>
                  <cc-notice
                    intent="danger"
                    heading="${b("cc-orga-member-list.leave.error-last-admin.heading")}"
                    message="${b("cc-orga-member-list.leave.error-last-admin.text")}"
                    no-icon
                  ></cc-notice>
                </div>
              `:""}
        </div>
      </cc-block-section>
    `}static get styles(){return[i`
        :host {
          display: block;
        }

        /* region invite form */

        .invite-form {
          align-items: flex-start;
          display: flex;
          flex-wrap: wrap;
          gap: 1em 1.5em;
        }

        .info {
          font-style: italic;
          margin: 0.5em 0;
        }

        /* 100 is a weird value but this makes the input grow as much as possible
  without pushing the select to a new line until the input width reaches 18em */

        .invite-form cc-input-text {
          flex: 100 1 18em;
        }

        .invite-form cc-select {
          flex: 1 1 max-content;
        }

        .submit {
          display: flex;
          justify-content: flex-end;
          width: 100%;
        }
        /* endregion */

        /* region member list  */

        .member-count {
          font-size: 0.9em;
          margin-left: 0.2em;
        }

        .member-list {
          display: flex;
          flex-direction: column;
          gap: 1.5em;
        }

        .filters {
          align-items: flex-end;
          display: flex;
          flex-wrap: wrap;
          gap: 1em 2.5em;
          justify-content: space-between;
          margin-bottom: 1em;
        }

        .filters cc-input-text {
          flex: 0 1 25em;
        }

        .filters__mfa {
          align-items: center;
          display: flex;
          gap: 0.35em;
        }

        .filters__mfa input {
          height: 1.1em;
          margin: 0;
          width: 1.1em;
        }

        .no-result-error {
          font-style: italic;
        }

        cc-orga-member-card.editing {
          background-color: var(--cc-color-bg-neutral);
          /* box-shadow is used to make the background spread full width (cancel the parent padding) */
          box-shadow: 0 0 0 1em var(--cc-color-bg-neutral);
        }
        /* endregion */

        /* region leave section */

        .leave {
          align-items: center;
          display: flex;
          flex-wrap: wrap;
          gap: 1.5em;
          justify-content: space-between;
        }

        .leave p {
          margin: 0;
        }

        .leave__text {
          display: flex;
          flex: 1 1 21em;
          flex-direction: column;
          gap: 0.5em;
        }

        .leave cc-button {
          margin-left: auto;
        }

        .wrapper-leave-error {
          display: flex;
          justify-content: end;
        }
        /* endregion */
      `]}}window.customElements.define("cc-orga-member-list",f);export{f as CcOrgaMemberList};
//# sourceMappingURL=cc-orga-member-list.js.map
