web2468/src/components/UInput/MultiNumPassInput.jsx

import {useEffect, useRef, useState} from "react";
import styled from 'styled-components/macro';
import {toast} from 'react-toastify';
const StyledInput= styled.input`
  position: absolute;
  font-size:1.2rem !important;
  font-weight:700 !important;
  text-align: center;
  padding: .5rem !important;
`;
const StyledInputControl=styled.button`
    padding: 0rem !important;
    justify-content: center !important;
    height:3.5rem !important;
`
const StyledPass=styled.div`
    width: 0.65rem;
    height: 0.65rem;
    background: var(--header);
    border-radius: 50%;
`
const MultiNumPassInput=({innerRef, ...props})=>{
    const [values,setValues]=useState([]);
    const [focusIndex,setFocusIndex]=useState(-1);
    const {length,value,focus,onChange,onFinish,className}=props;
    const col=length<1?1:length;
    const inputRef = useRef(null);
    const btnRefs = useRef([]);

    useEffect(()=>{
        initValues();
        return ()=>{

        }
    },[]);
    useEffect(()=>{
        if (inputRef.current)inputRef.current.focus();
    },[focusIndex]);
    useEffect(()=>{
        if (focus){
            if (values.length>0){
                checkFocus(values);
            }
        }
    },[focus])

    const initValues=()=>{
        let values=[];
        let initValues=[];
        if (value!=null){
            initValues=value.split('');
        }
        for (let i = 0; i <length ; i++) {
            values[i]=initValues[i]?initValues[i]:"";
        }
        setValues(values);
        if (focus)checkFocus(values);
    }
    // const checkFocus=(index)=>{
    //     // console.log(inputRefs);
    //     for (let i = 0; i <values.length; i++) {
    //         let value=values[i];
    //         if (i===index)continue;
    //         if (value===""){
    //             let input=inputRefs[i];
    //             if (input)input.focus();
    //             break;
    //         }
    //     }
    // }
    const checkFocus=(valueArr)=>{
        let fIndex=-1;
        for (let i = 0; i <valueArr.length; i++) {
            let value=valueArr[i];
            if (value===""){
                fIndex=i;
                break;
            }
        }
        setFocusIndex(fIndex);
        // toast.success(fIndex);
        if (fIndex===-1){
            if (onFinish)onFinish(valueArr);
        }
    }
    const handleChange=(index,value)=>{
        let valueArr=values.slice(0);
        valueArr[index]=value;
        if (value!==""){
            checkFocus(valueArr);
        }
        else
        {
            if (index==0){
                valueArr=Array.from({ length: length }, (_, index) => "");
            }
        }
        setValues(valueArr);
        if (onChange)onChange(index,value);
    }

    const renderContent=()=>{
        return (
            <>
                {
                    values.map((value,index)=>{
                        return (
                            <StyledInputControl
                                ref={(ref) => (btnRefs.current[index] = ref)}
                                onClick={()=>{
                                    setFocusIndex(index);
                                }}
                                type={"button"} key={index} className={`input-control ${value===""?className:''}`}>
                                {
                                    !(focusIndex===index)?(<></>):(
                                        <StyledInput
                                            ref={inputRef}
                                            // autoFocus={true}
                                            onChange={(e)=>{
                                                let text=e.target.value;
                                                handleChange(index,text)
                                            }}
                                            onFocus={()=>{
                                                handleChange(index,"");
                                            }}
                                            onKeyDown={(e)=>{
                                                if (e.keyCode === 8 || e.key === "Backspace") {
                                                    if (focusIndex>0){
                                                        setFocusIndex(focusIndex-1);
                                                    }
                                                }
                                            }}
                                            value={""}
                                            type={"number"}
                                            pattern="[0-9]*"
                                        />
                                    )
                                }
                                {
                                    value==null||value===""?(<></>):(<StyledPass/>)
                                }
                            </StyledInputControl>
                        )
                    })
                }
            </>
        )
    }
    return (
        <div className={`w-100 d-grid g-16 row-1 ${'col-'+col}`} ref={innerRef}>
            {renderContent()}
        </div>
    )
}
export default MultiNumPassInput;