import{j as t,r as e,k as i,l as s,m as n,n as r,P as o,R as a,z as l,a as c,S as h}from"./p-BxEPsDRj.js";import{n as u,c as d,r as p,U as f}from"./p-CrMmJdZ6.js";import"./p-YV_GhS6X.js";import"./p-WZF-tHaR.js";var m=t`
  :host {
    position: relative;
    display: inline-block;
  }

  input {
    width: 48px;
    height: 48px;
    background: ${({tokens:t})=>t.theme.foregroundPrimary};
    border-radius: ${({borderRadius:t})=>t[4]};
    border: 1px solid ${({tokens:t})=>t.theme.borderPrimary};
    font-family: ${({fontFamily:t})=>t.regular};
    font-size: ${({textSize:t})=>t.large};
    line-height: 18px;
    letter-spacing: -0.16px;
    text-align: center;
    color: ${({tokens:t})=>t.theme.textPrimary};
    caret-color: ${({tokens:t})=>t.core.textAccentPrimary};
    transition:
      background-color ${({durations:t})=>t["lg"]}
        ${({easings:t})=>t["ease-out-power-2"]},
      border-color ${({durations:t})=>t["lg"]}
        ${({easings:t})=>t["ease-out-power-2"]},
      box-shadow ${({durations:t})=>t["lg"]}
        ${({easings:t})=>t["ease-out-power-2"]};
    will-change: background-color, border-color, box-shadow;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: textfield;
    padding: ${({spacing:t})=>t[4]};
  }

  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  input[type='number'] {
    -moz-appearance: textfield;
  }

  input:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  input:focus-visible:enabled {
    background-color: transparent;
    border: 1px solid ${({tokens:t})=>t.theme.borderSecondary};
    box-shadow: 0px 0px 0px 4px ${({tokens:t})=>t.core.foregroundAccent040};
  }
`;var w=undefined&&undefined.__decorate||function(t,e,i,s){var n=arguments.length,r=n<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,i):s,o;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")r=Reflect.decorate(t,e,i,s);else for(var a=t.length-1;a>=0;a--)if(o=t[a])r=(n<3?o(r):n>3?o(e,i,r):o(e,i))||r;return n>3&&r&&Object.defineProperty(e,i,r),r};let g=class t extends s{constructor(){super(...arguments);this.disabled=false;this.value=""}render(){return n`<input
      type="number"
      maxlength="1"
      inputmode="numeric"
      autofocus
      ?disabled=${this.disabled}
      value=${this.value}
    /> `}};g.styles=[e,i,m];w([u({type:Boolean})],g.prototype,"disabled",void 0);w([u({type:String})],g.prototype,"value",void 0);g=w([d("wui-input-numeric")],g);var x=r`
  :host {
    position: relative;
    display: block;
  }
`;var b=undefined&&undefined.__decorate||function(t,e,i,s){var n=arguments.length,r=n<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,i):s,o;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")r=Reflect.decorate(t,e,i,s);else for(var a=t.length-1;a>=0;a--)if(o=t[a])r=(n<3?o(r):n>3?o(e,i,r):o(e,i))||r;return n>3&&r&&Object.defineProperty(e,i,r),r};let v=class t extends s{constructor(){super(...arguments);this.length=6;this.otp="";this.values=Array.from({length:this.length}).map((()=>""));this.numerics=[];this.shouldInputBeEnabled=t=>{const e=this.values.slice(0,t);return e.every((t=>t!==""))};this.handleKeyDown=(t,e)=>{const i=t.target;const s=this.getInputElement(i);const n=["ArrowLeft","ArrowRight","Shift","Delete"];if(!s){return}if(n.includes(t.key)){t.preventDefault()}const r=s.selectionStart;switch(t.key){case"ArrowLeft":if(r){s.setSelectionRange(r+1,r+1)}this.focusInputField("prev",e);break;case"ArrowRight":this.focusInputField("next",e);break;case"Shift":this.focusInputField("next",e);break;case"Delete":if(s.value===""){this.focusInputField("prev",e)}else{this.updateInput(s,e,"")}break;case"Backspace":if(s.value===""){this.focusInputField("prev",e)}else{this.updateInput(s,e,"")}break}};this.focusInputField=(t,e)=>{if(t==="next"){const t=e+1;if(!this.shouldInputBeEnabled(t)){return}const i=this.numerics[t<this.length?t:e];const s=i?this.getInputElement(i):undefined;if(s){s.disabled=false;s.focus()}}if(t==="prev"){const t=e-1;const i=this.numerics[t>-1?t:e];const s=i?this.getInputElement(i):undefined;if(s){s.focus()}}}}firstUpdated(){if(this.otp){this.values=this.otp.split("")}const t=this.shadowRoot?.querySelectorAll("wui-input-numeric");if(t){this.numerics=Array.from(t)}this.numerics[0]?.focus()}render(){return n`
      <wui-flex gap="1" data-testid="wui-otp-input">
        ${Array.from({length:this.length}).map(((t,e)=>n`
            <wui-input-numeric
              @input=${t=>this.handleInput(t,e)}
              @click=${t=>this.selectInput(t)}
              @keydown=${t=>this.handleKeyDown(t,e)}
              .disabled=${!this.shouldInputBeEnabled(e)}
              .value=${this.values[e]||""}
            >
            </wui-input-numeric>
          `))}
      </wui-flex>
    `}updateInput(t,e,i){const s=this.numerics[e];const n=t||(s?this.getInputElement(s):undefined);if(n){n.value=i;this.values=this.values.map(((t,s)=>s===e?i:t))}}selectInput(t){const e=t.target;if(e){const t=this.getInputElement(e);t?.select()}}handleInput(t,e){const i=t.target;const s=this.getInputElement(i);if(s){const i=s.value;if(t.inputType==="insertFromPaste"){this.handlePaste(s,i,e)}else{const n=f.isNumber(i);if(n&&t.data){this.updateInput(s,e,t.data);this.focusInputField("next",e)}else{this.updateInput(s,e,"")}}}this.dispatchInputChangeEvent()}handlePaste(t,e,i){const s=e[0];const n=s&&f.isNumber(s);if(n){this.updateInput(t,i,s);const n=e.substring(1);if(i+1<this.length&&n.length){const t=this.numerics[i+1];const e=t?this.getInputElement(t):undefined;if(e){this.handlePaste(e,n,i+1)}}else{this.focusInputField("next",i)}}else{this.updateInput(t,i,"")}}getInputElement(t){if(t.shadowRoot?.querySelector("input")){return t.shadowRoot.querySelector("input")}return null}dispatchInputChangeEvent(){const t=this.values.join("");this.dispatchEvent(new CustomEvent("inputChange",{detail:t,bubbles:true,composed:true}))}};v.styles=[e,x];b([u({type:Number})],v.prototype,"length",void 0);b([u({type:String})],v.prototype,"otp",void 0);b([p()],v.prototype,"values",void 0);v=b([d("wui-otp")],v);var $=r`
  wui-loading-spinner {
    margin: 9px auto;
  }

  .email-display,
  .email-display wui-text {
    max-width: 100%;
  }
`;var y=undefined&&undefined.__decorate||function(t,e,i,s){var n=arguments.length,r=n<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,i):s,o;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")r=Reflect.decorate(t,e,i,s);else for(var a=t.length-1;a>=0;a--)if(o=t[a])r=(n<3?o(r):n>3?o(e,i,r):o(e,i))||r;return n>3&&r&&Object.defineProperty(e,i,r),r};var k;let R=k=class t extends s{firstUpdated(){this.startOTPTimeout()}disconnectedCallback(){clearTimeout(this.OTPTimeout)}constructor(){super();this.loading=false;this.timeoutTimeLeft=o.getTimeToNextEmailLogin();this.error="";this.otp="";this.email=a.state.data?.email;this.authConnector=l.getAuthConnector()}render(){if(!this.email){throw new Error("w3m-email-otp-widget: No email provided")}const t=Boolean(this.timeoutTimeLeft);const e=this.getFooterLabels(t);return n`
      <wui-flex
        flexDirection="column"
        alignItems="center"
        .padding=${["4","0","4","0"]}
        gap="4"
      >
        <wui-flex
          class="email-display"
          flexDirection="column"
          alignItems="center"
          .padding=${["0","5","0","5"]}
        >
          <wui-text variant="md-regular" color="primary" align="center">
            Enter the code we sent to
          </wui-text>
          <wui-text variant="md-medium" color="primary" lineClamp="1" align="center">
            ${this.email}
          </wui-text>
        </wui-flex>

        <wui-text variant="sm-regular" color="secondary">The code expires in 20 minutes</wui-text>

        ${this.loading?n`<wui-loading-spinner size="xl" color="accent-primary"></wui-loading-spinner>`:n` <wui-flex flexDirection="column" alignItems="center" gap="2">
              <wui-otp
                dissabled
                length="6"
                @inputChange=${this.onOtpInputChange.bind(this)}
                .otp=${this.otp}
              ></wui-otp>
              ${this.error?n`
                    <wui-text variant="sm-regular" align="center" color="error">
                      ${this.error}. Try Again
                    </wui-text>
                  `:null}
            </wui-flex>`}

        <wui-flex alignItems="center" gap="2">
          <wui-text variant="sm-regular" color="secondary">${e.title}</wui-text>
          <wui-link @click=${this.onResendCode.bind(this)} .disabled=${t}>
            ${e.action}
          </wui-link>
        </wui-flex>
      </wui-flex>
    `}startOTPTimeout(){this.timeoutTimeLeft=o.getTimeToNextEmailLogin();this.OTPTimeout=setInterval((()=>{if(this.timeoutTimeLeft>0){this.timeoutTimeLeft=o.getTimeToNextEmailLogin()}else{clearInterval(this.OTPTimeout)}}),1e3)}async onOtpInputChange(t){try{if(!this.loading){this.otp=t.detail;if(this.shouldSubmitOnOtpChange()){this.loading=true;await(this.onOtpSubmit?.(this.otp))}}}catch(t){this.error=c.parseError(t);this.loading=false}}async onResendCode(){try{if(this.onOtpResend){if(!this.loading&&!this.timeoutTimeLeft){this.error="";this.otp="";const t=l.getAuthConnector();if(!t||!this.email){throw new Error("w3m-email-otp-widget: Unable to resend email")}this.loading=true;await this.onOtpResend(this.email);this.startOTPTimeout();h.showSuccess("Code email resent")}}else if(this.onStartOver){this.onStartOver()}}catch(t){h.showError(t)}finally{this.loading=false}}getFooterLabels(t){if(this.onStartOver){return{title:"Something wrong?",action:`Try again ${t?`in ${this.timeoutTimeLeft}s`:""}`}}return{title:`Didn't receive it?`,action:`Resend ${t?`in ${this.timeoutTimeLeft}s`:"Code"}`}}shouldSubmitOnOtpChange(){return this.authConnector&&this.otp.length===k.OTP_LENGTH}};R.OTP_LENGTH=6;R.styles=$;y([p()],R.prototype,"loading",void 0);y([p()],R.prototype,"timeoutTimeLeft",void 0);y([p()],R.prototype,"error",void 0);R=k=y([d("w3m-email-otp-widget")],R);export{R as W};
//# sourceMappingURL=p-O_x03Lx4.js.map