{"version":3,"sources":["../ui/src/components/player-components/codeInput/codeInput.tsx"],"sourcesContent":["import { ICodeInputPropsInterface } from \"interfaces\";\r\nimport { useEffect, useState, useRef, ChangeEvent, KeyboardEvent } from \"react\";\r\n\r\nlet currentOtpIndex = 0;\r\n\r\nconst CodeInput = ({ onChange }: ICodeInputPropsInterface) => {\r\n\r\n    const [otp, setOtp] = useState<string[]>(new Array(6).fill(\"\"));\r\n    const [activeOtpIndex, setActiveOtpIndex] = useState<number>(0);\r\n    const inputRef = useRef<HTMLInputElement>(null);\r\n    const handleChange = (e: ChangeEvent<HTMLInputElement>): void => {\r\n        const { value } = e.target;\r\n        const newOtp = [...otp];\r\n        newOtp[currentOtpIndex] = value.substring(value.length - 1);\r\n        if (!value) setActiveOtpIndex(currentOtpIndex - 1);\r\n        else setActiveOtpIndex(activeOtpIndex + 1);\r\n        setOtp(newOtp);\r\n        onChange(newOtp.join(\"\"));\r\n    }\r\n\r\n    const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>, index: number) => {\r\n        currentOtpIndex = index\r\n        if (event.key === \"Backspace\") setActiveOtpIndex(currentOtpIndex - 1);\r\n    }\r\n\r\n    useEffect(() => {\r\n        inputRef.current?.focus();\r\n    }, [activeOtpIndex])\r\n\r\n    return (\r\n        <div className=\"pl-flex pl-justify-center pl-items-center pl-gap-2 pl-mt-6\" dir=\"ltr\">\r\n            {otp.map((item: string, index: number) => {\r\n                return (\r\n                    <input\r\n                        key={index}\r\n                        ref={index === activeOtpIndex ? inputRef : null}\r\n                        type=\"number\"\r\n                        className={`pl-w-12 pl-h-7 pl-border-b pl-bg-transparent pl-outline-none pl-text-center pl-font-medium pl-text-[18px] pl-border-z-gray-400 dark:pl-border-dark-5 focus:pl-border-main-light focus:pl-text-gray-700 pl-text-black dark:pl-text-z-secondary-50 pl-transition\"}`}\r\n                        onKeyDown={(event) => handleKeyDown(event, index)}\r\n                        onChange={handleChange}\r\n                        value={otp[index]}\r\n                    />\r\n                );\r\n            })}\r\n        </div>\r\n    )\r\n}\r\n\r\nexport default CodeInput;"],"mappings":"yCAAAA,IACA,OAAS,aAAAC,EAAW,YAAAC,EAAU,UAAAC,MAA0C,QAgCpD,cAAAC,MAAA,oBA9BpB,IAAIC,EAAkB,EAEhBC,EAAY,CAAC,CAAE,SAAAC,CAAS,IAAgC,CAE1D,GAAM,CAACC,EAAKC,CAAM,EAAIP,EAAmB,IAAI,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC,EACxD,CAACQ,EAAgBC,CAAiB,EAAIT,EAAiB,CAAC,EACxDU,EAAWT,EAAyB,IAAI,EACxCU,EAAgBC,GAA2C,CAC7D,GAAM,CAAE,MAAAC,CAAM,EAAID,EAAE,OACdE,EAAS,CAAC,GAAGR,CAAG,EACtBQ,EAAOX,CAAe,EAAIU,EAAM,UAAUA,EAAM,OAAS,CAAC,EAErDJ,EADAI,EACkBL,EAAiB,EADVL,EAAkB,CACP,EACzCI,EAAOO,CAAM,EACbT,EAASS,EAAO,KAAK,EAAE,CAAC,CAC5B,EAEMC,EAAgB,CAACC,EAAwCC,IAAkB,CAC7Ed,EAAkBc,EACdD,EAAM,MAAQ,aAAaP,EAAkBN,EAAkB,CAAC,CACxE,EAEA,OAAAJ,EAAU,IAAM,CACZW,EAAS,SAAS,MAAM,CAC5B,EAAG,CAACF,CAAc,CAAC,EAGfN,EAAC,OAAI,UAAU,6DAA6D,IAAI,MAC3E,SAAAI,EAAI,IAAI,CAACY,EAAcD,IAEhBf,EAAC,SAEG,IAAKe,IAAUT,EAAiBE,EAAW,KAC3C,KAAK,SACL,UAAW,mQACX,UAAYM,GAAUD,EAAcC,EAAOC,CAAK,EAChD,SAAUN,EACV,MAAOL,EAAIW,CAAK,GANXA,CAOT,CAEP,EACL,CAER,EAEOE,EAAQf","names":["init_esm_shims","useEffect","useState","useRef","jsx","currentOtpIndex","CodeInput","onChange","otp","setOtp","activeOtpIndex","setActiveOtpIndex","inputRef","handleChange","e","value","newOtp","handleKeyDown","event","index","item","codeInput_default"]}