kuotata/src/components/LoanPanel.jsx

import { useState } from "react";
import LoanPrincipalInput from "./LoanPrincipalInput";
import LoanDurationInput from "./LoanDurationInput";
import LoanInterestInput from "./LoanInterestInput";
import sanitizeInputIntoRange from "../inputSanitizers/sanitizeInputIntoRange";
import sanitizeInputAsOnlyDigits from "../inputSanitizers/sanitizeInputAsOnlyDigits";

const LoanPanel = () => {
  const [hasBeenInteracted, setHasBeenInteracted] = useState(false);
  const [loanPrincipal, setLoanPrincipal] = useState("");
  const [loanDuration, setLoanDuration] = useState(12);
  const [loanInterest, setLoanInterest] = useState(5);

  const sanitizeInputToIntWithinRange = ({ value, min, max }) => {
    const onlyDigitsValue = sanitizeInputAsOnlyDigits({ value });
    const inRangeValue = sanitizeInputIntoRange({
      value: onlyDigitsValue,
      min: min,
      max: max,
    });

    return inRangeValue;
  };

  const handleLoanPrincipalChange = (event) => {
    setHasBeenInteracted(1);
    const inputValue = event.target.value;
    const sanitizedInputValue = sanitizeInputToIntWithinRange({
      value: inputValue,
      min: 0,
      max: 1_000_000,
    });
    setLoanPrincipal(sanitizedInputValue);
  };

  const handleLoanDurationChange = (event) => {
    setHasBeenInteracted(1);
    const inputValue = event.target.value;
    const sanitizedInputValue = sanitizeInputToIntWithinRange({
      value: inputValue,
      min: 1,
      max: 360,
    });
    setLoanDuration(sanitizedInputValue);
  };

  const handleLoanInterestChange = (event) => {
    setHasBeenInteracted(1);
    const inputValue = event.target.value;
    const sanitizedInputValue = sanitizeInputToIntWithinRange({
      value: inputValue,
      min: 0,
      max: 50,
    });
    setLoanInterest(sanitizedInputValue);
  };

  return (
    <>
      <div className="p-5 bg-gray-50 rounded-3xl border border-gray-400">
        <form className="flex flex-col justify-end items-end my-5 text-white bg-blue-600 p-5 rounded-3xl shadow-[0_4px_0_rgba(0,255,255,1)]">
          <LoanPrincipalInput
            onChangeCallback={handleLoanPrincipalChange}
            loanPrincipal={loanPrincipal}
          />
          <LoanDurationInput
            onChangeCallback={handleLoanDurationChange}
            loanDuration={loanDuration}
          />
          <LoanInterestInput
            onChangeCallback={handleLoanInterestChange}
            loanInterest={loanInterest}
          />
        </form>
        {hasBeenInteracted ? (
          <div className="flex flex-col items-center justify-center">
            <div className="w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
            <p className="font-light">
              Calculando los detalles del préstamo...
            </p>
          </div>
        ) : null}
      </div>
    </>
  );
};

export default LoanPanel;