import { IonRow } from "@ionic/react";
import { useEffect, useRef } from "react";
import KeypadInput from "./KeypadInput";

interface KeypadInputsProps {
  values: string[];
  activeIndex: number;
  incorrect: boolean;
  correct: boolean;
}

const KeypadInputs: React.FC<KeypadInputsProps> = ({
  values,
  activeIndex,
  incorrect,
  correct,
}) => {
  const keypadRef = useRef<HTMLIonRowElement>(null);

  useEffect(() => {
    if (incorrect) {
      keypadRef.current?.classList.add("incorrect");
      setTimeout(() => {
        keypadRef.current?.classList.remove("incorrect");
      }, 1000);
    }
  }, [incorrect]);

  useEffect(() => {
    if (correct) {
      keypadRef.current?.classList.add("correct");
    }
  }, [correct]);

  // Convert values from string to number
  const numericValues: number[] = values.map((value) => parseInt(value));

  return (
    <IonRow ref={keypadRef} className="ion-justify-content-center">
      {numericValues.map((value, index) => {
        const isActive = index === activeIndex;
        const isFilled = value.toString() !== "";
        return (
          <KeypadInput
            key={index}
            correct={correct}
            incorrect={incorrect}
            isFilled={isFilled}
            isActive={isActive}
            value={value.toString()}
            //placeholder="0"
            handleChange={() => {}}
          />
        );
      })}
    </IonRow>
  );
};

export default KeypadInputs;