import { IonRow } from "@ionic/react";
import "./Keypad.css";
import KeypadButton from "./KeypadButton";

interface KeypadProps {
  activeIndex: number;
  handleClick: (activeIndex: number, value: number) => void;
  handleRemove: () => void;
  handleResend: () => void;
  amount: number;
  correct: boolean;
}

const Keypad: React.FC<KeypadProps> = ({
  activeIndex,
  handleClick,
  handleRemove,
  handleResend,
  amount,
  correct,
}) => {
  const keypadButtons = [
    [
      {
        value: "1",
        handleClick: () => handleClick(activeIndex, 1),
        small: false,
        remove: false,
      },
      {
        value: "2",
        handleClick: () => handleClick(activeIndex, 2),
        small: false,
        remove: false,
      },
      {
        value: "3",
        handleClick: () => handleClick(activeIndex, 3),
        small: false,
        remove: false,
      },
    ],
    [
      {
        value: "4",
        handleClick: () => handleClick(activeIndex, 4),
        small: false,
        remove: false,
      },
      {
        value: "5",
        handleClick: () => handleClick(activeIndex, 5),
        small: false,
        remove: false,
      },
      {
        value: "6",
        handleClick: () => handleClick(activeIndex, 6),
        small: false,
        remove: false,
      },
    ],
    [
      {
        value: "7",
        handleClick: () => handleClick(activeIndex, 7),
        small: false,
        remove: false,
      },
      {
        value: "8",
        handleClick: () => handleClick(activeIndex, 8),
        small: false,
        remove: false,
      },
      {
        value: "9",
        handleClick: () => handleClick(activeIndex, 9),
        small: false,
        remove: false,
      },
    ],
    [
      {
        value: "Resend",
        handleClick: () => handleResend(),
        small: true,
        remove: false,
      },
      {
        value: "0",
        handleClick: () => handleClick(activeIndex, 0),
        small: false,
        remove: false,
      },
      /*  {
        value: "0",
        handleClick: () => handleResend(),
        small: false,
        remove: false,
      },*/
      {
        value: "",
        handleClick: () => handleRemove(),
        small: true,
        remove: true,
      },
    ],
  ];

  return (
    <div className={"keypad"}>
      {keypadButtons.map((keypadRow, index) => {
        const isDisabled =
          parseInt(activeIndex.toString()) === parseInt(amount.toString());
        return (
          <IonRow key={`keypadRow_${index}`}>
            {keypadRow.map((button, index2) => {
              return (
                <KeypadButton
                  correct={correct}
                  isDisabled={isDisabled}
                  key={`keypadButton_${index2}`}
                  value={button.value}
                  handleClick={button.handleClick}
                  small={button.small}
                  remove={button.remove}
                />
              );
            })}
          </IonRow>
        );
      })}
    </div>
  );
};

export default Keypad;