import {
    ChangeEvent,
    KeyboardEvent,
    useCallback,
    useEffect,
    useRef,
    useState,
} from 'react';
import {IEnterCode} from '../enter-code.type';

export const useEnterCode = ({onComplete, fields}: IEnterCode) => {
    const [code, setCode] = useState<string[]>(Array(fields).fill(''));
    const inputs = useRef<(HTMLInputElement | null)[]>([]);

    const processInput = useCallback(
        (e: ChangeEvent<HTMLInputElement>, slot: number) => {
            const num = e.target.value;
            if (/[^0-9]/.test(num)) return;
            let newCode = [...code];
            if (num.length > 1)
                newCode = [
                    ...code.slice(0, slot),
                    ...num.split(''),
                    ...code.slice(slot + num.length),
                ];
            else newCode[slot] = num;
            setCode(newCode);
            if (slot !== fields - 1) {
                inputs.current[
                    Math.min(num.length + slot, fields - 1)
                ]?.focus();
            }
            if (newCode.every((num) => num !== '') && onComplete) {
                onComplete(newCode.join(''));
            }
        },
        [code, fields, onComplete],
    );

    const onKeyUp = useCallback(
        (e: KeyboardEvent<HTMLInputElement>, slot: number) => {
            if (e.key === 'Backspace' && !code[slot] && slot !== 0) {
                const newCode = [...code];
                newCode[slot - 1] = '';
                setCode(newCode);
                inputs.current[slot - 1]?.focus();
            }
        },
        [code],
    );

    useEffect(() => {
        inputs.current = inputs.current.slice(0, fields); // Update the ref array length
    }, [fields]);

    return {processInput, onKeyUp, code, inputs};
};