1// src/components/CalculatorForm.tsx
  2import React, { JSX } from "react";
  3import { useCalculator } from "../hooks/useCalculator";
  4import RepetitionCard from "./RepetitionCard";
  5
  6const CalculatorForm: React.FC = () => {
  7  const { state, handleInputChange, swapOdds } = useCalculator();
  8
  9  const coloraPrezzo = (number: number): JSX.Element => {
 10    const className = number >= 0 ? "positive" : "negative";
 11    return <span className={className}>{number.toFixed(2)}€</span>;
 12  };
 13
 14  return (
 15    <div>
 16      <div className="row" style={{ marginBottom: "50px" }}>
 17        <div className="col centered">
 18          <form>
 19            <div className="row">
 20              <div className="col">
 21                <label htmlFor="inputPercentage">Rimborso del</label>
 22                <input
 23                  type="number"
 24                  value={state.percentage}
 25                  id="inputPercentage"
 26                  className="form-control inline-input"
 27                  placeholder="Percentuale"
 28                  style={{ width: "60px", textAlign: "right" }}
 29                  min="0"
 30                  max="100"
 31                  required
 32                  onChange={handleInputChange}
 33                />
 34                %<label htmlFor="inputMax"> fino a</label>
 35                <input
 36                  type="number"
 37                  value={state.max}
 38                  id="inputMax"
 39                  className="form-control inline-input"
 40                  placeholder="Rimborso massimo"
 41                  style={{ width: "70px", textAlign: "left" }}
 42                  min="0"
 43                  required
 44                  onChange={handleInputChange}
 45                />
 46                €
 47              </div>
 48            </div>
 49          </form>
 50          <div className="row">
 51            <hr />
 52          </div>
 53          <form>
 54            <div className="row">
 55              <div className="col">
 56                <label htmlFor="inputOdd1">Quota 1</label>
 57                <input
 58                  type="number"
 59                  value={state.odd1}
 60                  id="inputOdd1"
 61                  className="form-control"
 62                  placeholder="Quota 1"
 63                  min="1"
 64                  step="0.01"
 65                  onChange={handleInputChange}
 66                />
 67                <label htmlFor="inputOdd2">Quota 2</label>
 68                <input
 69                  type="number"
 70                  value={state.odd2}
 71                  id="inputOdd2"
 72                  className="form-control"
 73                  placeholder="Quota 2"
 74                  min="1"
 75                  step="0.01"
 76                  onChange={handleInputChange}
 77                />
 78              </div>
 79
 80              <div className="col">
 81                <label htmlFor="inputStake">Punta</label>
 82                <input
 83                  type="number"
 84                  id="inputStake"
 85                  className="form-control"
 86                  value={state.stake}
 87                  min="1"
 88                  required
 89                  onChange={handleInputChange}
 90                />
 91
 92                <label htmlFor="inputRefund">Rimborso</label>
 93                <input
 94                  type="number"
 95                  id="inputRefund"
 96                  className="form-control"
 97                  value={state.refund}
 98                  min="0"
 99                  required
100                  onChange={handleInputChange}
101                />
102              </div>
103
104              <div className="col text-center">
105                <label htmlFor="inputRepetitions">Ripetizioni</label>
106                <input
107                  type="number"
108                  value={state.repetitions}
109                  id="inputRepetitions"
110                  className="form-control"
111                  placeholder="Ripetizioni"
112                  min="1"
113                  required
114                  onChange={handleInputChange}
115                />
116                Minimo:{" "}
117                <span>
118                  {state.minimumProfit
119                    ? coloraPrezzo(state.minimumProfit)
120                    : "non definito"}
121                </span>
122                <br />
123                <button
124                  type="button"
125                  className="btn btn-primary"
126                  onClick={swapOdds}
127                >
128                  Inverti quote
129                </button>
130              </div>
131            </div>
132          </form>
133        </div>
134      </div>
135
136      <div className="row">
137        {state.results.map((repetition, index) => (
138          <div key={index}>
139            <RepetitionCard
140              repetition={repetition}
141              index={index}
142              odd1={state.odd1}
143              odd2={state.odd2}
144            />
145          </div>
146        ))}
147      </div>
148    </div>
149  );
150};
151
152export default CalculatorForm;