import{LitElement as t,html as e,css as a}from"lit";import{classMap as i}from"lit/directives/class-map.js";import{ifDefined as s}from"lit/directives/if-defined.js";import{createRef as r,ref as n}from"lit/directives/ref.js";import{iconRemixAccountCircleFill as c,iconRemixCheckFill as o,iconRemixErrorWarningFill as l,iconRemixCloseFill as d,iconRemixEditFill as m,iconRemixDeleteBinLine as h}from"./assets/cc-remix.icons.js";import{ResizeController as g}from"./controllers/resize-controller.js";import{i18n as p}from"./translation.js";import"./cc-badge.js";import"./cc-button.js";import"./cc-icon.js";import"./cc-img.js";import"./cc-notice.js";import"./cc-select.js";import"./cc-stretch.js";import{CcOrgaMemberLeaveEvent as b,CcOrgaMemberDeleteEvent as u,CcOrgaMemberEditToggleEvent as w,CcOrgaMemberUpdateEvent as v}from"./components/cc-orga-member-card/cc-orga-member-card.events.js";const y=[350,580,740];class f extends t{static get properties(){return{authorisations:{type:Object},state:{type:Object},_newRole:{type:String,state:!0}}}constructor(){super(),this.authorisations={edit:!1,delete:!1},this.state={type:"loaded",id:"",email:"",role:"DEVELOPER",isMfaEnabled:!1,isCurrentUser:!1},this._deleteButtonRef=r(),this._newRole=null,this._roleRef=r(),this._resizeController=new g(this,{widthBreakpoints:y})}focusDeleteBtn(){this._deleteButtonRef.value.focus()}_getFirstBtnAccessibleName(){const t=this.state.name??this.state.email;return"editing"===this.state.type||"updating"===this.state.type?p("cc-orga-member-card.btn.cancel.accessible-name",{memberIdentity:t}):p("cc-orga-member-card.btn.edit.accessible-name",{memberIdentity:t})}_getSecondBtnAccessibleName(){const t=this.state.name??this.state.email;return"editing"===this.state.type||"updating"===this.state.type?p("cc-orga-member-card.btn.validate.accessible-name",{memberIdentity:t}):this.state.isCurrentUser?p("cc-orga-member-card.btn.leave.accessible-name"):p("cc-orga-member-card.btn.delete.accessible-name",{memberIdentity:t})}_getRoleOptions(){return[{value:"ADMIN",label:p("cc-orga-member-card.role.admin")},{value:"DEVELOPER",label:p("cc-orga-member-card.role.developer")},{value:"ACCOUNTING",label:p("cc-orga-member-card.role.accounting")},{value:"MANAGER",label:p("cc-orga-member-card.role.manager")}]}_getSecondBtnVisibleElementId(t){return t?"btn-content-validate":this.state.isCurrentUser?"btn-content-leave":"btn-content-delete"}_getOrgaMember(){return{id:this.state.id,email:this.state.email,role:this.state.role,name:this.state.name,avatar:this.state.avatar,jobTitle:this.state.jobTitle,isMfaEnabled:this.state.isMfaEnabled,isCurrentUser:this.state.isCurrentUser}}_onDeleteMember(){this.state.isCurrentUser?this.dispatchEvent(new b(this._getOrgaMember())):this.dispatchEvent(new u(this._getOrgaMember()))}_onRoleChange({detail:t}){this._newRole=t}async _onToggleEdit(){const t="loaded"===this.state.type?"editing":"loaded";this.state={...this.state,type:t},this._newRole=this.state.role,this.dispatchEvent(new w({memberId:this.state.id,newState:t})),"editing"===t&&(await this.updateComplete,this._roleRef.value.focus())}_onUpdateMember(){this._newRole!==this.state.role?this.dispatchEvent(new v({id:this.state.id,email:this.state.email,role:this.state.role,name:this.state.name,avatar:this.state.avatar,jobTitle:this.state.jobTitle,isMfaEnabled:this.state.isMfaEnabled,isCurrentUser:this.state.isCurrentUser,newRole:this._newRole})):this._onToggleEdit()}render(){const t="updating"===this.state.type||"deleting"===this.state.type,a=null!=this.state.name,r=("loaded"===this.state.type||"editing"===this.state.type)&&this.state.error,n=this.authorisations.edit&&this.authorisations.delete;return e`
      <div class="wrapper ${i({"has-actions":n,"has-error":r})}">
        ${null==this.state.avatar?e` <cc-icon class="avatar ${i({waiting:t})}" .icon=${c}></cc-icon> `:e` <cc-img class="avatar ${i({waiting:t})}" src=${this.state.avatar}></cc-img> `}
        <div class="identity ${i({waiting:t})}" title="${s(this.state.jobTitle??void 0)}">
          ${a||this.state.isCurrentUser?e`
                <p class="name">
                  ${a?e`<strong>${this.state.name}</strong>`:""}
                  ${this.state.isCurrentUser?e` <cc-badge>${p("cc-orga-member-card.current-user")}</cc-badge> `:""}
                </p>
              `:""}
          <p class="email">${this.state.email}</p>
        </div>

        ${this._renderStatusArea()} ${n?this._renderActionBtns(r):""}

        <!--
          a11y: we need the live region to be present within the DOM from the start and insert content dynamically inside it.
          We have to add a conditional class to the wrapper when it does not contain any message to cancel the gap applied automatically within the grid.
         -->
        <div class="error-wrapper ${i({"out-of-flow":!r})}" aria-live="polite" aria-atomic="true">
          ${r?e`
                <cc-notice
                  intent="danger"
                  heading="${p("cc-orga-member-card.error.last-admin.heading")}"
                  message="${p("cc-orga-member-card.error.last-admin.text")}"
                  no-icon
                >
                </cc-notice>
              `:""}
        </div>
      </div>
    `}_renderStatusArea(){const t="editing"===this.state.type||"updating"===this.state.type,a="updating"===this.state.type||"deleting"===this.state.type;return e`
      <cc-stretch
        class="status ${i({waiting:a})}"
        visible-element-id=${t?"status-editing":"status-readonly"}
      >
        <div id="status-readonly" class="status__role-mfa">
          <cc-stretch visible-element-id=${this.state.role}>
            ${this._getRoleOptions().map((t=>e` <cc-badge id="${t.value}" intent="info" weight="dimmed">${t.label}</cc-badge> `))}
          </cc-stretch>

          <cc-stretch visible-element-id=${this.state.isMfaEnabled?"badge-mfa-enabled":"badge-mfa-disabled"}>
            <cc-badge id="badge-mfa-enabled" intent="success" weight="outlined" .icon="${o}">
              ${p("cc-orga-member-card.mfa-enabled")}
            </cc-badge>
            <cc-badge id="badge-mfa-disabled" intent="danger" weight="outlined" .icon="${l}">
              ${p("cc-orga-member-card.mfa-disabled")}
            </cc-badge>
          </cc-stretch>
        </div>

        <cc-select
          id="status-editing"
          label="${p("cc-orga-member-card.role.label")}"
          .options=${this._getRoleOptions()}
          .value=${this._newRole??this.state.role}
          ?inline=${this._resizeController.width>350}
          ?disabled=${"updating"===this.state.type}
          @cc-select=${this._onRoleChange}
          ${n(this._roleRef)}
        >
        </cc-select>
      </cc-stretch>
    `}_renderActionBtns(t){const a=this._resizeController.width>=740,i="updating"===this.state.type||"deleting"===this.state.type,s="editing"===this.state.type||"updating"===this.state.type,r=s?o:h;return e`
      <div class="actions">
        <cc-button
          ?primary=${!s}
          outlined
          .icon=${s?d:m}
          ?circle=${a}
          ?disabled=${i}
          ?hide-text=${a}
          a11y-name=${this._getFirstBtnAccessibleName()}
          @cc-click=${this._onToggleEdit}
        >
          <cc-stretch visible-element-id=${s?"btn-content-cancel":"btn-content-edit"}>
            <span id="btn-content-edit">${p("cc-orga-member-card.btn.edit.visible-text")}</span>
            <span id="btn-content-cancel">${p("cc-orga-member-card.btn.cancel.visible-text")}</span>
          </cc-stretch>
        </cc-button>

        <cc-button
          ?danger=${!s}
          ?primary=${s}
          outlined
          .icon=${r}
          ?disabled=${t}
          ?circle=${a}
          ?hide-text=${a}
          ?waiting=${i}
          a11y-name=${this._getSecondBtnAccessibleName()}
          @cc-click=${s?this._onUpdateMember:this._onDeleteMember}
          ${n(this._deleteButtonRef)}
        >
          <cc-stretch visible-element-id=${this._getSecondBtnVisibleElementId(s)}>
            <span id="btn-content-leave">${p("cc-orga-member-card.btn.leave.visible-text")}</span>
            <span id="btn-content-delete">${p("cc-orga-member-card.btn.delete.visible-text")}</span>
            <span id="btn-content-validate">${p("cc-orga-member-card.btn.validate.visible-text")}</span>
          </cc-stretch>
        </cc-button>
      </div>
    `}static get styles(){return[a`
        /* region big (>= 740) & global */
        :host {
          display: block;
        }

        .wrapper {
          align-items: center;
          display: grid;
          gap: 0.8em 1em;
        }

        :host([w-gte-740]) .wrapper {
          grid-template-areas: 'avatar identity status';
          grid-template-columns: max-content 1fr max-content;
        }

        :host([w-gte-740]) .wrapper.has-actions {
          grid-template-areas: 'avatar identity status actions';
          grid-template-columns: max-content 1fr max-content max-content;
        }

        :host([w-gte-740]) .wrapper.has-actions.has-error {
          grid-template-areas:
            'avatar identity status actions'
            '. error error error';
        }

        :host(.editing) .actions cc-button {
          --cc-icon-size: 1.4em;
        }

        p {
          margin: 0;
        }

        .avatar {
          --cc-icon-color: #595959;

          clip-path: circle(50% at 50% 50%);
          grid-area: avatar;
          height: 3em;
          width: 3em;
        }

        .identity {
          display: flex;
          flex-direction: column;
          gap: 0.3em;
          grid-area: identity;
          /* makes the email address wrap if needed */
          word-break: break-all;
        }

        .name {
          display: flex;
          flex-wrap: wrap;
          gap: 0.5em;
        }

        .status {
          grid-area: status;
        }

        .status cc-badge {
          white-space: nowrap;
          width: 100%;
        }

        .actions {
          display: flex;
          gap: 0.5em;
          grid-area: actions;
          justify-content: space-evenly;
          min-width: 4em;
        }

        .status__role-mfa {
          align-items: center;
          display: flex;
          gap: 0.5em 1em;
        }

        .error-wrapper {
          display: flex;
          /* always leave the first column containing only the avatar. */
          grid-area: error;
          justify-content: end;
        }

        /* This is to cancel the grid gap when there is no error message. */

        .error-wrapper.out-of-flow {
          grid-area: avatar;
        }

        .waiting {
          opacity: var(--cc-opacity-when-disabled, 0.65);
        }
        /* endregion */

        /* region medium (< 740) */

        :host([w-lt-740]) .wrapper {
          grid-template-areas: 'avatar identity status';
          grid-template-columns: max-content 1fr;
        }

        :host([w-lt-740]) .wrapper.has-actions {
          grid-template-areas:
            'avatar identity status'
            '. . actions';
        }

        :host([w-lt-740]) .wrapper.has-actions.has-error {
          grid-template-areas:
            'avatar identity status'
            '. . actions'
            '. error error';
        }

        :host([w-lt-740]) .status,
        :host([w-lt-740]) .actions {
          justify-self: end;
        }

        :host([w-lt-740]) .error {
          margin-top: 0.5em;
        }
        /* endregion */

        /* region small (< 580) */

        :host([w-lt-580]) .wrapper {
          grid-template-areas:
            'avatar identity'
            '. status';
          grid-template-columns: max-content 1fr;
        }

        :host([w-lt-580]) .wrapper.has-actions {
          grid-template-areas:
            'avatar identity'
            '. status'
            '. actions';
        }

        :host([w-lt-580]) .wrapper.has-actions.has-error {
          grid-template-areas:
            'avatar identity'
            '. status'
            '. actions'
            '. error';
        }

        :host([w-lt-580]) .status {
          justify-self: start;
        }

        :host([w-lt-580]) .actions {
          justify-self: start;
        }
        /* endregion */

        /* region tiny (< 350) */

        :host([w-lt-350]) .status,
        :host([w-lt-350]) cc-select {
          width: 100%;
        }

        :host([w-lt-350]) .actions {
          flex-direction: column;
          justify-self: stretch;
        }

        :host([w-lt-350]) .status__role-mfa {
          align-items: flex-start;
          flex-direction: column;
          width: 100%;
        }
        /* endregion */
      `]}}window.customElements.define("cc-orga-member-card",f);export{f as CcOrgaMemberCard};
//# sourceMappingURL=cc-orga-member-card.js.map
