import React,{useReducer} from 'react';

const initialState=( )=>{

t=" ";
g="h";
res=" ";
err=" ";
}
const reducer=(state,action){
switch(action.type){
case "setT":
return {...state,t:action.payload};
case "setG":
return {...state,g:action.payload};
case "setRes":
return {...state,res:action.payload};
case"setErr":
return{...state,res:" "};
default:
return state;
}
const Error=(t,dispatch)=>{
if(t<150){
dipatch({type:"setErr",payload:"Taille inférieure à 150cm"})
}else if(isNan(parseInt(t)){
dipatch({type:"setErr",payload:"La valeur de la taille doit etre un entier"}
}
}
const Image=(g)=>{
let img="";
if(g==="h"){
img="/homme.png";
}else{
img="/femme.png";
}
return <img src={img} alt="myimg"/>
};
const Calcul=(state,dispatch)=>{
Error(state.t);
if(!state.err){
let resultat=0;
const taille = parseInt(state.t);
if (state.g === "h") {
resultat = taille - 100 - (taille - 150) / 4;
} else if (g === "f") {
resultat = taille - 100 - (taille - 150) / 2.5;
}
dispatch({type:"setRes",payload:resultat});
}
};
const Poid = () => {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<div className="poids-ideal-container">
<label>Taille en cm :</label>
<br />
<input
type="text"
placeholder="Tapez votre taille"
onChange={(e) => dispatch ({type:"setT",payload:e.target.value})}
 value={state.t}
/>
<br />
<label>Genre :</label>
<select onChange={(e) => dispatch
({type:"setG",payload:e.target.value})}value={state.g}>
<option value="h">Homme</option>
<option value="f">Femme</option>
</select><br/>
{Image(state.g)}
<br />
<label>Poids Idéal :</label>
<br />
<input type="text" value={isNaN(parseInt(state.t)) ? state.err : state.res}
readOnly />
<button onClick={Calcul}>Calculer</button>
</div>
);
}
)
export default Poid;