// src/components/CalculatorForm.tsx
import React, { JSX } from "react";
import { useCalculator } from "../hooks/useCalculator";
import RepetitionCard from "./RepetitionCard";

const CalculatorForm: React.FC = () => {
  const { state, handleInputChange, swapOdds } = useCalculator();

  const coloraPrezzo = (number: number): JSX.Element => {
    const className = number >= 0 ? "positive" : "negative";
    return <span className={className}>{number.toFixed(2)}€</span>;
  };

  return (
    <div>
      <div className="row" style={{ marginBottom: "50px" }}>
        <div className="col centered">
          <form>
            <div className="row">
              <div className="col">
                <label htmlFor="inputPercentage">Rimborso del</label>
                <input
                  type="number"
                  value={state.percentage}
                  id="inputPercentage"
                  className="form-control inline-input"
                  placeholder="Percentuale"
                  style={{ width: "60px", textAlign: "right" }}
                  min="0"
                  max="100"
                  required
                  onChange={handleInputChange}
                />
                %<label htmlFor="inputMax"> fino a</label>
                <input
                  type="number"
                  value={state.max}
                  id="inputMax"
                  className="form-control inline-input"
                  placeholder="Rimborso massimo"
                  style={{ width: "70px", textAlign: "left" }}
                  min="0"
                  required
                  onChange={handleInputChange}
                />
                €
              </div>
            </div>
          </form>
          <div className="row">
            <hr />
          </div>
          <form>
            <div className="row">
              <div className="col">
                <label htmlFor="inputOdd1">Quota 1</label>
                <input
                  type="number"
                  value={state.odd1}
                  id="inputOdd1"
                  className="form-control"
                  placeholder="Quota 1"
                  min="1"
                  step="0.01"
                  onChange={handleInputChange}
                />
                <label htmlFor="inputOdd2">Quota 2</label>
                <input
                  type="number"
                  value={state.odd2}
                  id="inputOdd2"
                  className="form-control"
                  placeholder="Quota 2"
                  min="1"
                  step="0.01"
                  onChange={handleInputChange}
                />
              </div>

              <div className="col">
                <label htmlFor="inputStake">Punta</label>
                <input
                  type="number"
                  id="inputStake"
                  className="form-control"
                  value={state.stake}
                  min="1"
                  required
                  onChange={handleInputChange}
                />

                <label htmlFor="inputRefund">Rimborso</label>
                <input
                  type="number"
                  id="inputRefund"
                  className="form-control"
                  value={state.refund}
                  min="0"
                  required
                  onChange={handleInputChange}
                />
              </div>

              <div className="col text-center">
                <label htmlFor="inputRepetitions">Ripetizioni</label>
                <input
                  type="number"
                  value={state.repetitions}
                  id="inputRepetitions"
                  className="form-control"
                  placeholder="Ripetizioni"
                  min="1"
                  required
                  onChange={handleInputChange}
                />
                Minimo:{" "}
                <span>
                  {state.minimumProfit
                    ? coloraPrezzo(state.minimumProfit)
                    : "non definito"}
                </span>
                <br />
                <button
                  type="button"
                  className="btn btn-primary"
                  onClick={swapOdds}
                >
                  Inverti quote
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>

      <div className="row">
        {state.results.map((repetition, index) => (
          <div key={index}>
            <RepetitionCard
              repetition={repetition}
              index={index}
              odd1={state.odd1}
              odd2={state.odd2}
            />
          </div>
        ))}
      </div>
    </div>
  );
};

export default CalculatorForm;