"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var k=require("react/jsx-runtime"),N=require("./text-input.js"),I=require("@styled/css"),f=require("react");const h=/\D/g,j=({pinLength:u,onComplete:w=c=>c,onChange:m=c=>c,originName:C,id:v="pin-code-input",autoFocus:y=!0})=>{const[c,$]=f.useState(()=>Array.from({length:u},()=>"")),o=f.useRef(Array(u).fill(null));f.useEffect(()=>{$(e=>u<e.length?e.slice(0,u):u>e.length?[...e,...Array(u-e.length).fill("")]:e)},[u]),f.useEffect(()=>{var e;y&&o.current[0]&&((e=o.current[0])===null||e===void 0||e.focus())},[y,u]);const d=(e,n)=>{var r;$(n),m(n);const t=n.join("");t.length===u&&((r=o.current[e])===null||r===void 0||r.blur(),w(t))},A=f.useCallback((e,n)=>{const r=[...c];n.replace(h,"").split("").forEach(t=>{var a,s;e>=u||(r[e]=t,e++,(s=(a=o?.current)===null||a===void 0?void 0:a[e])===null||s===void 0||s.focus())}),d(e,r)},[c,d]),T=f.useCallback(e=>{var n,r;const t=parseInt(e.currentTarget.dataset.id||"",10),a=e.target.value.replace(h,"");if(a.length>1)return A(t,a);const s=[...c];s[t]=a,a.length&&((r=(n=o?.current)===null||n===void 0?void 0:n[t+1])===null||r===void 0||r.focus()),d(t,s)},[d]),q=f.useCallback(e=>{var n,r,t,a,s;const x=e.currentTarget.value.length,i=parseInt(e.currentTarget.dataset.id||"",10),p=[...c];switch(e.key){case"Backspace":{if(x&&(p[i]="",d(i,p)),i){const l=p.reduceRight((g,R,E)=>g!==-1?g:R!==""?E:g,-1);(n=o?.current[l>=0?l:0])===null||n===void 0||n.focus()}return}case"ArrowLeft":{const l=i?i-1:u-1;(r=o?.current[l])===null||r===void 0||r.focus();return}case"ArrowRight":{const l=i===u-1?0:i+1;(t=o?.current[l])===null||t===void 0||t.focus();return}default:{const l=e.key.replace(h,"");x&&l.length&&l!==e.currentTarget.value&&(p[i]=l,d(i,p),(s=(a=o?.current)===null||a===void 0?void 0:a[i+1])===null||s===void 0||s.focus())}}},[m,d]),b=C?`${C} `:"";return k.jsx("form",{id:v,className:I.css({margin:0,minWidth:0,display:"flex",width:"100%",justifyContent:"space-between",maxWidth:"30rem",gap:2}),children:c.map((e,n)=>k.jsx(N.TextInput.Char,{id:v?`${v}-${n}`:void 0,"aria-label":`${b}one time password input ${n+1}`,"data-id":n,name:`${b}one time password input ${n+1}`,value:c[n]||"",className:I.css({caretColor:"transparent"}),attr:{onChange:T,onKeyUp:q,autoComplete:n===0?"one-time-code":"off",inputMode:"numeric"},ref:r=>{o?.current&&(o.current[n]=r)}},`${v||void 0}-${n}`))})};exports.PinCodeInput=j,exports.default=j;
//# sourceMappingURL=pincode-input.js.map
