import{Fragment,h}from"@stencil/core";import{__}from"@wordpress/i18n";export class ScVerificationCode{constructor(){this.filledAllInputs=()=>this.codes.join("").trim().length===this.total,this.total=6,this.codes=Array(this.total).fill(""),this.loading=!1,this.onChange=void 0}handleKeyDown(e,t){"Backspace"!==e.key&&"Delete"!==e.key||(e.preventDefault(),this.getElementByIndex(t).value="",this.codes=[...this.codes.slice(0,t),"",...this.codes.slice(t+1)],t>0&&this.focusInput(t-1))}handleInput(e,t){let s=e.target.value;if(s.length>1){const e=[...this.codes];for(let i=0;i<this.total-t&&i<s.length;i++){const o=this.getElementByIndex(t+i);o.blur(),o.value=s[i],e[t+i]=s[i]}this.codes=e,t=t+s.length-1,s=s[s.length-1]}t<this.codes.length&&(this.codes=[...this.codes.slice(0,t),s,...this.codes.slice(t+1)]),t<this.codes.length-1&&s.length>0&&this.focusInput(t+1),t===this.codes.length-1&&s.length>0&&this.getElementByIndex(t).blur(),this.filledAllInputs()&&this.handleCodeChange()}handleCodeChange(){const e=(this.codes.join("")||"").trim();e.length===this.total&&this.onChange(e)}focusInput(e){const t=this.getElementByIndex(e);t&&(t.focus(),t.select())}async triggerFocus(){this.focusInput(0)}getElementByIndex(e){return this.el.querySelector(`#code-input-${e}`)}handleFocus(e){e.target.select()}reset(){var e;this.codes=Array(this.total).fill(""),null===(e=this.getElementByIndex(0))||void 0===e||e.focus()}render(){return h("div",{key:"134b4552986a35a342fcdf1abcd6a9070ceb3477",class:"sc-verification-code"},Array.from({length:this.total}).map(((e,t)=>h(Fragment,null,t===Math.floor(this.total/2)&&h("span",{class:"sc-verification-code__separator","aria-hidden":"true"},"—"),h("input",{key:t,id:`code-input-${t}`,value:this.codes[t]?this.codes[t]:"",onInput:e=>this.handleInput(e,t),onKeyDown:e=>this.handleKeyDown(e,t),onFocus:e=>this.handleFocus(e),autocomplete:"one-time-code",inputmode:"numeric",pattern:"[0-9]*",autofocus:0===t,required:!0,"aria-label":__(`Verification code ${t+1} of ${this.total}`,"surecart")})))),h("button",{key:"fc6ccc0f842158fd6bc5dc395a05f979b77953e8",type:"submit",class:"visually-hidden",onClick:()=>this.onChange(this.codes.join(""))},__("Submit","surecart")))}static get is(){return"sc-verification-code"}static get originalStyleUrls(){return{$:["sc-verification-code.scss"]}}static get styleUrls(){return{$:["sc-verification-code.css"]}}static get properties(){return{total:{type:"number",mutable:!1,complexType:{original:"number",resolved:"number",references:{}},required:!1,optional:!1,docs:{tags:[],text:"Total number of inputs"},attribute:"total",reflect:!1,defaultValue:"6"},loading:{type:"boolean",mutable:!1,complexType:{original:"boolean",resolved:"boolean",references:{}},required:!1,optional:!1,docs:{tags:[],text:"Whether the component is in a loading/verifying state"},attribute:"loading",reflect:!1,defaultValue:"false"},onChange:{type:"unknown",mutable:!1,complexType:{original:"(value: string) => void",resolved:"(value: string) => void",references:{}},required:!1,optional:!1,docs:{tags:[],text:"On change verification code"}}}}static get states(){return{codes:{}}}static get methods(){return{triggerFocus:{complexType:{signature:"() => Promise<void>",parameters:[],references:{Promise:{location:"global",id:"global::Promise"}},return:"Promise<void>"},docs:{text:"Focus the first code input.",tags:[]}}}}static get elementRef(){return"el"}}