patient_Information_reactProject/src/Components/PatientForm/RecreationalHobbiesSection7.tsx

import { FormControl, FormControlLabel, FormLabel, Grid, Radio, RadioGroup, TextField } from "@mui/material";
import React, { useEffect } from "react";

interface Patient {
    hobbies: string;
    educationLevel: string;
    excercise: string;
    excerciseExplanation: string;
    tobacco: string;
    tobaccoExplanation: string;
    alcohol: string;
    alcoholExplanation: string;
    healthyDiet: string;
    healthyDietExplanation: string;
    sleep: string;
    sleepExplanation: string;
    workSchool: string;
    workSchoolExplanation: string;
    familyLife: string;
    familyLifeExplanation: string;
    drugs: string;
    drugsExplanation:string;
  }

  type Props = {
    handleFormSection7Data:(
      hobbies: string|undefined,
      educationLevel: string|undefined,
      excercise: string|undefined,
      excerciseExplanation: string|undefined,
      tobacco: string|undefined,
      tobaccoExplanation: string|undefined,
      alcohol: string|undefined,
      alcoholExplanation: string|undefined,
      healthyDiet: string|undefined,
      healthyDietExplanation: string|undefined,
      sleep: string|undefined,
      sleepExplanation: string|undefined,
      workSchool: string|undefined,
      workSchoolExplanation: string|undefined,
      familyLife: string|undefined,
      familyLifeExplanation: string|undefined,
      drugs: string|undefined,
      drugsExplanation:string|undefined,
    )=> void
    patientDataDiplay:any;
    type:string;
  }

export default function RecreationalHobbiesSection7({handleFormSection7Data,patientDataDiplay,type}:Props){
    const [patient, setPatient] = React.useState<Patient>({
          hobbies: '',
          educationLevel: '',
          excercise:'',
          excerciseExplanation:'',
          tobacco: '',
          tobaccoExplanation:'',
          alcohol: '',
          alcoholExplanation:'',
          healthyDiet: '',
          healthyDietExplanation:'',
          sleep: '',
          sleepExplanation: '',
          workSchool: '',
          workSchoolExplanation:'',
          familyLife: '',
          familyLifeExplanation:'',
          drugs: '',
          drugsExplanation:''
      });


    useEffect(()=>{
      handleFormSection7Data(
        patient.hobbies,
        patient.educationLevel,
        patient.excercise,
        patient.excerciseExplanation,
        patient.tobacco,
        patient.tobaccoExplanation,
        patient.alcohol,
        patient.alcoholExplanation,
        patient.healthyDiet,
        patient.healthyDietExplanation,
        patient.sleep,
        patient.sleepExplanation,
        patient.workSchool,
        patient.workSchoolExplanation,
        patient.familyLife,
        patient.familyLifeExplanation,
        patient.drugs,
        patient.drugsExplanation
      )
    },[patient])
    
    return(
        <>
        
        <Grid container direction="row">
        <Grid item xs={12} className='collapsable-form-style-multiline'>
          <FormLabel>Recreational Activities/Hobbies:</FormLabel><br></br>
                <TextField 
                multiline
                variant="outlined"
                label="" 
                value={type=='display'?patientDataDiplay.hobbies:patient.hobbies}
                disabled={type=='display'}
                onChange={(event:any) => {
                  setPatient((prevValues) => ({
                    ...prevValues,
                    hobbies: event.target.value,
                  }));
                }}
                />
          </Grid>

        <Grid item xs={12} className='collapsable-form-style-radioButtons'>
                <FormControl>
                    <FormLabel>Your education level:</FormLabel>
                    <RadioGroup
                        sx={{display:'flex', flexDirection:'row'}}
                        defaultValue={type=='display'?patientDataDiplay.educationLevel:patient.educationLevel}
                        onChange={(event) => {
                          setPatient((prevValues) => ({
                            ...prevValues,
                            educationLevel: event.target.value,
                          }));
                        }}
                        >
                        <FormControlLabel disabled={type=='display'} value="High School" control={<Radio />} label="High School" />
                        <FormControlLabel disabled={type=='display'} value="Some college" control={<Radio />} label="Some college" />
                        <FormControlLabel disabled={type=='display'} value="College Graduate" control={<Radio />} label="College Graduate" />
                        <FormControlLabel disabled={type=='display'} value="Post college" control={<Radio />} label="Post college" />
                        <FormControlLabel disabled={type=='display'} value="Other" control={<Radio />} label="Other" />
                    </RadioGroup>
              </FormControl>
          </Grid>

          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
                <FormControl>
                    <FormLabel>Do you excercise?</FormLabel>
                    <RadioGroup
                        name="painDuration"
                        sx={{display:'flex', flexDirection:'row'}}
                        defaultValue={type=='display'?patientDataDiplay.excercise:patient.excercise}
                        onChange={(event) => {
                          setPatient((prevValues) => ({
                            ...prevValues,
                            excercise: event.target.value,
                          }));
                        }}
                        >
                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
                    </RadioGroup>
              </FormControl>
          </Grid>

          <Grid item xs={6} className='collapsable-form-style-form7'>
                <TextField 
                disabled={patient.excercise!=='Yes'||type=='display'}
                variant="outlined"
                label="Times per week?" 
                name='treatmentGoal'
                value={type=='display'?patientDataDiplay.excerciseExplanation:patient.excerciseExplanation}
                onChange={(event) => {
                  setPatient((prevValues) => ({
                    ...prevValues,
                    excerciseExplanation: event.target.value,
                  }));
                }}
                />
            </Grid>

          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
                <FormControl>
                    <FormLabel>Use tobacco?</FormLabel>
                    <RadioGroup
                        name="painDuration"
                        sx={{display:'flex', flexDirection:'row'}}
                        defaultValue={type=='display'?patientDataDiplay.tobacco:patient.tobacco}
                        onChange={(event) => {
                          setPatient((prevValues) => ({
                            ...prevValues,
                            tobacco: event.target.value,
                          }));
                        }}
                        >
                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
                    </RadioGroup>
              </FormControl>
          </Grid>

          <Grid item xs={6} className='collapsable-form-style-form7'>
                <TextField 
                disabled={patient.tobacco!=='Yes'||type=='display'}
                value={type=='display'?patientDataDiplay.tobaccoExplanation:patient.tobaccoExplanation}
                variant="outlined"
                label="Packs/Cans per day(If you have quit, when did you quit?)" 
                name='treatmentGoal'
                onChange={(event) => {
                  setPatient((prevValues) => ({
                    ...prevValues,
                    tobaccoExplanation: event.target.value,
                  }));
                }}
                />
            </Grid>

          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
                <FormControl>
                    <FormLabel>Consume alcohol?</FormLabel>
                    <RadioGroup
                        name="painDuration"
                        sx={{display:'flex', flexDirection:'row'}}
                        defaultValue={type=='display'?patientDataDiplay.alcohol:patient.alcohol}
                        onChange={(event) => {
                          setPatient((prevValues) => ({
                            ...prevValues,
                            alcohol: event.target.value,
                          }));
                        }}
                        >
                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
                    </RadioGroup>
              </FormControl>
          </Grid>

          <Grid item xs={6} className='collapsable-form-style-form7'>
                <TextField 
                disabled={patient.alcohol!=='Yes'||type=='display'}
                value={type=='display'?patientDataDiplay.alcoholExplanation:patient.alcoholExplanation}
                variant="outlined"
                label="How many drinks per week?" 
                name='treatmentGoal'
                onChange={(event) => {
                  setPatient((prevValues) => ({
                    ...prevValues,
                    alcoholExplanation: event.target.value,
                  }));
                }}
                />
            </Grid>

          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
                <FormControl>
                    <FormLabel>Have a healthy diet?</FormLabel>
                    <RadioGroup
                        name="painDuration"
                        sx={{display:'flex', flexDirection:'row'}}
                        defaultValue={type=='display'?patientDataDiplay.healthyDiet:patient.healthyDiet}
                        onChange={(event) => {
                          setPatient((prevValues) => ({
                            ...prevValues,
                            healthyDiet: event.target.value,
                          }));
                        }}
                        >
                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
                    </RadioGroup>
              </FormControl>
          </Grid>

          <Grid item xs={6} className='collapsable-form-style-form7'>
                <TextField 
                disabled={patient.healthyDiet!=='No'||type=='display'}
                value={type=='display'?patientDataDiplay.healthyDietExplanation:patient.healthyDietExplanation}
                variant="outlined"
                label="If no, explain" 
                name='treatmentGoal'
                onChange={(event) => {
                  setPatient((prevValues) => ({
                    ...prevValues,
                    healthyDietExplanation: event.target.value,
                  }));
                }}
                />
          </Grid>

          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
                <FormControl>
                    <FormLabel>Get adequate sleep?</FormLabel>
                    <RadioGroup
                        name="painDuration"
                        sx={{display:'flex', flexDirection:'row'}}
                        defaultValue={type=='display'?patientDataDiplay.sleep:patient.sleep}
                        onChange={(event) => {
                          setPatient((prevValues) => ({
                            ...prevValues,
                            sleep: event.target.value,
                          }));
                        }}
                        >
                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
                    </RadioGroup>
              </FormControl>
          </Grid>

          <Grid item xs={6} className='collapsable-form-style-form7'>
                <TextField 
                disabled={patient.sleep!=='No'||type=='display'}
                value={type=='display'?patientDataDiplay.sleepExplanation:patient.sleepExplanation}
                variant="outlined"
                label="If no, explain" 
                name='treatmentGoal'
                onChange={(event) => {
                  setPatient((prevValues) => ({
                    ...prevValues,
                    sleepExplanation: event.target.value,
                  }));
                }}
                />
          </Grid>

          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
                <FormControl>
                    <FormLabel>Is Work/School stressful to you?</FormLabel>
                    <RadioGroup
                        name="painDuration"
                        sx={{display:'flex', flexDirection:'row'}}
                        defaultValue={type=='display'?patientDataDiplay.workSchool:patient.workSchool}
                        onChange={(event) => {
                          setPatient((prevValues) => ({
                            ...prevValues,
                            workSchool: event.target.value,
                          }));
                        }}
                        >
                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
                    </RadioGroup>
              </FormControl>
          </Grid>

          <Grid item xs={6} className='collapsable-form-style-form7'>
                <TextField 
                disabled={patient.workSchool!=='Yes'||type=='display'}
                value={type=='display'?patientDataDiplay.workSchool:patient.workSchool}
                variant="outlined"
                label="If yes, explain" 
                name='treatmentGoal'
                onChange={(event) => {
                  setPatient((prevValues) => ({
                    ...prevValues,
                    workSchool: event.target.value,
                  }));
                }}
                />
          </Grid>

          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
                <FormControl>
                    <FormLabel>Family life stressful to you?</FormLabel>
                    <RadioGroup
                        name="painDuration"
                        sx={{display:'flex', flexDirection:'row'}}
                        defaultValue={type=='display'?patientDataDiplay.familyLife:patient.familyLife}
                        onChange={(event) => {
                          setPatient((prevValues) => ({
                            ...prevValues,
                            familyLife: event.target.value,
                          }));
                        }}
                        >
                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
                    </RadioGroup>
              </FormControl>
          </Grid>

          <Grid item xs={6} className='collapsable-form-style-form7'>
                <TextField 
                disabled={patient.familyLife!=='Yes'||type=='display'}
                value={type=='display'?patientDataDiplay.familyLifeExplanation:patient.familyLifeExplanation}
                variant="outlined"
                label="If yes, explain" 
                name='treatmentGoal'
                onChange={(event) => {
                  setPatient((prevValues) => ({
                    ...prevValues,
                    familyLifeExplanation: event.target.value,
                  }));
                }}
                />
          </Grid>

          <Grid item xs={6} className='collapsable-form-style-radioButtons'>
                <FormControl>
                    <FormLabel>Use recreational drugs?</FormLabel>
                    <RadioGroup
                        name="painDuration"
                        sx={{display:'flex', flexDirection:'row'}}
                        defaultValue={type=='display'?patientDataDiplay.drugs:patient.drugs}
                        onChange={(event) => {
                          setPatient((prevValues) => ({
                            ...prevValues,
                            drugs: event.target.value,
                          }));
                        }}
                        >
                        <FormControlLabel disabled={type=='display'} value="Yes" control={<Radio />} label="Yes" />
                        <FormControlLabel disabled={type=='display'} value="No" control={<Radio />} label="No" />
                    </RadioGroup>
              </FormControl>
          </Grid>

          <Grid item xs={6} className='collapsable-form-style-form7'>
                <TextField 
                disabled={patient.drugs!=='Yes'||type=='display'}
                value={type=='display'?patientDataDiplay.drugsExplanation:patient.drugsExplanation}
                variant="outlined"
                label="If yes, explain" 
                name='treatmentGoal'
                onChange={(event) => {
                  setPatient((prevValues) => ({
                    ...prevValues,
                    drugsExplanation: event.target.value,
                  }));
                }}
                />
          </Grid>            
        </Grid>
        </>
    )
}