import React, { useRef, useEffect, useImperativeHandle, forwardRef } from 'react';

const defaultSettings = {
  translate: { '\\w': (c: string) => c.toUpperCase() },
  lastDigitEntered: null,
  showCredits: true,
};

interface CodePickerProps {
  nrOfBoxes: number;
  allowedChars: string[];
  digitBoxes: string[];
  setDigitBoxes: (newDigitBoxes: string[]) => void;
  lastDigitEntered?: (code: string) => void;
  showCredits?: boolean;
}

export interface CodePickerRef {
  reset: () => void;
}

const CodePicker: React.ForwardRefRenderFunction<CodePickerRef, CodePickerProps> = (props, ref) => {
  const settings = { ...defaultSettings, ...props };
  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);

  useEffect(() => {
    if (settings.lastDigitEntered) {
      const fullCode = props.digitBoxes.join('');
      settings.lastDigitEntered(fullCode);
    }
  }, [props.digitBoxes]);

  useImperativeHandle(ref, () => ({
    reset: () => {
      props.setDigitBoxes(Array(settings.nrOfBoxes).fill(''));
    }
  }));

  const handleInputChange = (index: number, value: string) => {
    const sanitizedValue = value.split('').filter(char => settings.allowedChars.includes(char)).shift() || '';
    const newDigitBoxes = [...props.digitBoxes];
    newDigitBoxes[index] = sanitizedValue;
    props.setDigitBoxes(newDigitBoxes);

    if (sanitizedValue && index < settings.nrOfBoxes - 1) {
      inputRefs.current[index + 1]?.focus();
    }
  };

  const handleKeyDown = (index: number, e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Backspace' && !props.digitBoxes[index]) {
      if (index > 0) {
        inputRefs.current[index - 1]?.focus();
      }
    }
  };

  return (
    <div className="bsms-code-picker">
      {props.digitBoxes.map((digit, index) => (
        <input
          key={index}
          type="text"
          className={`bsms-code-digit bsms-code-digit-${index}`}
          value={digit}
          onChange={(e) => handleInputChange(index, e.target.value)}
          onKeyDown={(e) => handleKeyDown(index, e)}
          ref={(el) => {inputRefs.current[index] = el }}
        />
      ))}
      {settings.showCredits && (
        <a className="bsms-code-digit-credits" href="https://www.berlinsms.de">
          Credits
        </a>
      )}
    </div>
  );
};

export default forwardRef(CodePicker);