import{LitElement as e,html as t,css as i}from"lit";import{classMap as s}from"lit/directives/class-map.js";import{createRef as r,ref as a}from"lit/directives/ref.js";import{iconCleverMailStarLine as c,iconCleverMailLine as n}from"./assets/cc-clever.icons.js";import{iconRemixDeleteBinFill as o,iconRemixCheckboxCircleFill as d,iconRemixSpam_2Fill as l}from"./assets/cc-remix.icons.js";import{LostFocusController as m}from"./controllers/lost-focus-controller.js";import{fakeString as p}from"./lib/fake-strings.js";import{focusBySelector as y}from"./lib/focus-helper.js";import{FormErrorFocusController as f}from"./lib/form/form-error-focus-controller.js";import{formSubmit as u}from"./lib/form/form-submit-directive.js";import{sortBy as g}from"./lib/utils.js";import{skeletonStyles as b}from"./styles/skeleton.js";import{i18n as h}from"./translation.js";import"./cc-badge.js";import"./cc-block-section.js";import"./cc-block.js";import"./cc-button.js";import"./cc-icon.js";import"./cc-input-text.js";import"./cc-notice.js";import{CcEmailSendConfirmationEvent as $,CcEmailDeleteEvent as v,CcEmailMarkAsPrimaryEvent as S,CcEmailAddEvent as k}from"./components/cc-email-list/cc-email-list.events.js";const _={type:"idle",address:p(35),verified:!1},w=[];class j extends e{static get properties(){return{addEmailFormState:{type:Object,attribute:!1},emailListState:{type:Object,attribute:!1}}}constructor(){super(),this.addEmailFormState={type:"idle"},this.emailListState={type:"loading"},this._addressInputRef=r(),this._formRef=r(),new m(this,".secondary",(({suggestedElement:e})=>{y(e,".delete-button",(()=>{this._addressInputRef.value.focus()}))})),new f(this,this._formRef,(()=>this.addEmailFormState.errors))}resetAddEmailForm(){this._formRef.value?.reset()}_getVerifiedTagLabel(e){const i=h(e?"cc-email-list.primary.email.verified":"cc-email-list.primary.email.unverified");return t`<span>${i}</span>`}_onSendConfirmationEmail(){"loaded"===this.emailListState.type&&this.dispatchEvent(new $(this.emailListState.emailList.primaryAddress.address))}_onDelete(e){this.dispatchEvent(new v(e))}_onMarkAsPrimary(e){this.dispatchEvent(new S(e))}_onAddFormSubmit(e){this.addEmailFormState={...this.addEmailFormState,errors:null};const t=String(e.address);this.dispatchEvent(new k(t))}_getErrorMessage(e){switch(e){case"invalid":return h("cc-input-text.error.bad-email");case"already-defined":return h("cc-email-list.secondary.address-input.error.already-defined");case"used":return h("cc-email-list.secondary.address-input.error.used")}}render(){return t`
      <cc-block>
        <div slot="header-title">${h("cc-email-list.title")}</div>

        ${"loading"===this.emailListState.type?t`
              ${this._renderPrimarySection(_,!0)}
              ${this._renderSecondarySection(w)}
            `:""}
        ${"loaded"===this.emailListState.type?t`
              ${this._renderPrimarySection(this.emailListState.emailList.primaryAddress)}
              ${this._renderSecondarySection(this.emailListState.emailList.secondaryAddresses)}
            `:""}
        ${"error"===this.emailListState.type?t`
              <cc-notice slot="content" intent="warning" message="${h("cc-email-list.loading.error")}"></cc-notice>
            `:""}
      </cc-block>
    `}_renderPrimarySection(e,i=!1){const r=e.address,a=e.verified,n=!i&&!a,o=a?"success":"danger",m=a?d:l;return t`
      <cc-block-section slot="content-body">
        <div slot="title">${h("cc-email-list.primary.title")}</div>
        <div slot="info">${h("cc-email-list.primary.description")}</div>

        <div class="address-line primary">
          <div class="address">
            <cc-icon class="icon--auto" .icon=${c} size="lg"></cc-icon>
            <span class="${s({skeleton:i})}">${r}</span>
          </div>
          <cc-badge intent="${o}" weight="outlined" ?skeleton="${i}" .icon="${m}"
            >${this._getVerifiedTagLabel(e.verified)}
          </cc-badge>
        </div>
        ${n?t`
              <cc-button
                @cc-click=${this._onSendConfirmationEmail}
                ?waiting=${"sending-confirmation-email"===e.type}
                link
              >
                ${h("cc-email-list.primary.action.resend-confirmation-email")}
              </cc-button>
            `:""}
      </cc-block-section>
    `}_renderSecondarySection(e){const i=[...e].sort(g("address")),r=i.some((e=>"marking-as-primary"===e.type));return t`
      <cc-block-section slot="content-body">
        <div slot="title">${h("cc-email-list.secondary.title")}</div>
        <div slot="info">${h("cc-email-list.secondary.description")}</div>

        <ul class="secondary-addresses">
          ${i.map((e=>{const i="marking-as-primary"===e.type||"deleting"===e.type,a=(r||i)&&"marking-as-primary"!==e.type;return t`
              <li class="address-line secondary">
                <div class="address ${s({loading:i})}">
                  <cc-icon class="icon--auto" .icon=${n} size="lg"></cc-icon>
                  <span>${e.address}</span>
                </div>
                <div class="buttons">
                  <cc-button
                    @cc-click=${()=>this._onMarkAsPrimary(e.address)}
                    ?waiting="${"marking-as-primary"===e.type}"
                    ?disabled="${a}"
                    a11y-name="${h("cc-email-list.secondary.action.mark-as-primary.accessible-name",{address:e.address})}"
                  >
                    ${h("cc-email-list.secondary.action.mark-as-primary.name")}
                  </cc-button>
                  <cc-button
                    class="delete-button"
                    danger
                    outlined
                    .icon=${o}
                    @cc-click=${()=>this._onDelete(e.address)}
                    ?waiting="${"deleting"===e.type}"
                    ?disabled="${i&&"deleting"!==e.type}"
                    a11y-name="${h("cc-email-list.secondary.action.delete.accessible-name",{address:e.address})}"
                  >
                    ${h("cc-email-list.secondary.action.delete.name")}
                  </cc-button>
                </div>
              </li>
            `}))}
        </ul>

        ${this._renderAddEmailForm()}
      </cc-block-section>
    `}_renderAddEmailForm(){const e="adding"===this.addEmailFormState.type;return t`
      <form ${a(this._formRef)} ${u(this._onAddFormSubmit.bind(this))}>
        <cc-input-text
          label="${h("cc-email-list.secondary.address-input.label")}"
          name="address"
          type="email"
          required
          ?readonly=${e}
          .errorMessage=${this._getErrorMessage(this.addEmailFormState.errors?.email)}
          ${a(this._addressInputRef)}
        >
          <p slot="help">${h("cc-email-list.secondary.address-input.format")}</p>
        </cc-input-text>
        <cc-button primary ?waiting=${e} type="submit">
          ${h("cc-email-list.secondary.action.add")}
        </cc-button>
      </form>
    `}static get styles(){return[b,i`
        :host {
          display: block;
        }

        .secondary-addresses {
          margin: 0;
          padding: 0;
        }

        /* region address-line */

        .address-line {
          align-items: center;
          display: flex;
          flex-wrap: wrap;
          gap: 1em;
        }

        .address-line.secondary {
          margin-bottom: 0.8em;
        }

        .address {
          align-items: center;
          display: flex;
          gap: 1em;
        }

        .address.loading {
          opacity: var(--cc-opacity-when-disabled);
        }

        .address-line.secondary .address {
          flex: 1 1 0;
        }

        .address span {
          word-break: break-all;
        }

        .address-line.secondary .address span {
          min-width: 15em;
        }

        /* endregion */

        .buttons {
          align-items: center;
          display: flex;
          flex-wrap: wrap;
          gap: 1em;
        }

        /* region FORM */

        form {
          align-items: start;
          display: flex;
          flex-wrap: wrap;
          gap: 0 1em;
          justify-content: flex-end;
        }

        form > cc-input-text {
          flex: 1 1 19em;
        }

        form > cc-button {
          margin-top: var(--cc-margin-top-btn-horizontal-form);
        }

        /* endregion */

        .skeleton {
          background-color: #bbb;
          color: transparent !important;
        }

        .icon--auto {
          flex: auto 0 0;
        }
      `]}}window.customElements.define("cc-email-list",j);export{j as CcEmailList};
//# sourceMappingURL=cc-email-list.js.map
