import { FC, useState, MouseEventHandler } from 'react'
import Button from '../Button';

export type ModalIntakesProps = {
  onAccept?: MouseEventHandler<HTMLButtonElement> | undefined
}

const ModalIntakes: FC<ModalIntakesProps> = (props) => {

  let { onAccept } = props;

  // Array for possible errors coming from the back-end verification
  let errors = {
    region: "",
    sexo: "",
    edad: "",
    alimentacion: "",
    faseDeEmbarazo: "",
  }
  

  const [profile, setProfile] = useState({
    region: "",
    sexo: "",
    edad: "",
    alimentacion: "",
    faseDeEmbarazo: "",

  });

  function handleChange(e: { target: HTMLSelectElement }): void {
    const { name, value } = e.target;

    // If the default value of alimentacion is chosen, sets alimentacion and faseDeEmbarazo to an empty string.
    if(value === "" && name==="alimentacion"){
      let newObject = { ...profile,alimentacion:"",faseDeEmbarazo:""};

     setProfile(newObject)
    }

    // If the value of alimentacion is "Normal", sets the value of alimentacion to "Normal" and faseDeEmbarazo to an empty string.
    else if(value === "Normal" && name==="alimentacion"){
      let newObject = { ...profile,alimentacion:"Normal",faseDeEmbarazo:""};

     setProfile(newObject)
    }

    // If the value of sexo is set to default, sets the value of sexo, alimentacion and faseDeEmbarazo to an empty string.
    else if (value === "" && name==="sexo") {
     let newObject = { ...profile, sexo:"",alimentacion:"",faseDeEmbarazo:""};

     setProfile(newObject)
   }

    // If the value of sexo is set to "Masculino", It sets the value of alimentacion to "Normal" and the value of faseDeEmbarazo to an empty string.
    else if (value === "Masculino") {
      let newObject = { ...profile, sexo: "Masculino", alimentacion: "Normal", faseDeEmbarazo:"" };
      
      setProfile(newObject)
    }

    // If the value of sexo is set to "Femenino", sets alimentacion and faseDeEmbarazo to empty strings.
    else if (value === "Femenino") {
      let newObject = { ...profile, sexo: "Femenino", alimentacion: "", faseDeEmbarazo:"" };
      
      setProfile(newObject)
    }
    else {
      setProfile({ ...profile, [name]: value })
    }
    
  }



  return (
    <div>
      {/* Shows the header of the modal */}
      <div className="modalHeader">
        <p className="modalHeaderText">
          Ingesta Recomendada
        </p>
      </div>

      {/* Takes care of showing the selected options */}
      <div className="ModalInformation">
        <p className="ModalInformationText">
          {(profile.region === "") && (profile.sexo === "") && (profile.edad === "") && (profile.alimentacion === "") && (profile.faseDeEmbarazo === "") ?
            'Sin información' :
            (profile.region === "" ? "" : profile.region) + 
            (profile.sexo === "" ? "" : (profile.region === "" ? "" : " / ") + profile.sexo) + 
            (profile.edad === "" ? "" : (profile.sexo === "" && profile.region === "" ? "" : " / ") + profile.edad) + 
            (profile.alimentacion === "" || profile.sexo === "Masculino" ? "" : " / " + profile.alimentacion) + 
            (profile.faseDeEmbarazo === "" ? "" : (profile.alimentacion === "" && profile.edad === "" && profile.sexo === "" && profile.region === "" ? "" : " / ") + profile.faseDeEmbarazo)
          }
        </p>
      </div>



      {/* Options and error messages */}
      {errors.region ? <p className="fieldError">{errors.region}</p> : ""}
      <select id="Region:" name="region" className='selection' onChange={handleChange} >
        <option value="">Seleccione region</option>
        <option value="España">España</option>
        <option value="EEUU">EEUU</option>
        <option value="Europa">Europa</option>
        <option value="Italia">Italia</option>
      </select>
      
      {errors.sexo ? <p className="fieldError">{errors.sexo}</p> : ""}
      <select id="Sexo:" name="sexo" className='selection' onChange={handleChange} >
        <option value="">Seleccione sexo</option>
        <option value="Femenino">Femenino</option>
        <option value="Masculino">Masculino</option>
      </select>
      
      {errors.edad ? <p className="fieldError">{errors.edad}</p> : ""}   
      <select id="Edad:" name="edad" className='selection' onChange={handleChange}>
        <option value="">Seleccione edad del paciente</option>
        <option value="10-13 Años">10-13 Años</option>
        <option value="14-18 Años">14-18 Años</option>
        <option value="19-30 Años">19-30 Años</option>
        <option value="31-50 Años">31-50 Años</option>
        <option value="51-70 Años">51-70 Años</option>
        <option value=">70 Años">{`>`}70 Años</option>
      </select>
        

      {errors.alimentacion ? <p className="fieldError">{errors.alimentacion}</p> : ""}
      {profile.sexo === "Femenino" &&
        <select id="Alimentacion:" name="alimentacion" className='selection' onChange={handleChange}>
          <option value="">Seleccione tipo de alimentación</option>
          <option value="Gestante">Gestante</option>
          <option value="Lactante">Lactante</option>
          <option value="Normal">Normal</option>
        </select>
      }


      {errors.faseDeEmbarazo ? <p className="fieldError">{errors.faseDeEmbarazo}</p> : ""}
      {profile.sexo === "Femenino" && (profile.alimentacion === "Lactante" || profile.alimentacion === "Gestante") &&
        <select id="Fase:" name="faseDeEmbarazo" className='selection' onChange={handleChange}>
          <option value="">Seleccione fase de embarazo</option>
          <option value="Embarazo I Trimestre">Embarazo I Trimestre</option>
          <option value="Embarazo II Trimestre">Embarazo II Trimestre</option>
          <option value="Embarazo III Trimestre">Embarazo III Trimestre</option>
          <option value="Lactancia Materna I Trimestre">Lactancia Materna I Trimestre</option>
          <option value="Lactancia Materna II Trimestre">Lactancia Materna II Trimestre</option>
        </select>
        }

      {/* Footer of the modal, where the buttons are shown */}
      <div className="modalBodyInsideFooter">
        <Button variant="secondary" label="VOLVER" onClick={onAccept} />
        <Button label="GUARDAR" onClick={onAccept} />
      </div>



    </div>
  );

}

export default ModalIntakes;