patient_Information_reactProject/src/Components/PatientDetails/MedicalHistorySection3.tsx

import * as React from 'react';
import { Checkbox, FormControlLabel, TextField, FormGroup, Grid, FormControl, FormLabel, Radio, RadioGroup } from '@mui/material';
import { useFormik } from 'formik';
import * as Yup from 'yup';

interface FormValues {
  physicianname: string;
  physiciancity: string;
  physicianstate: string;
  physicianphone: string;
  chiropractorName: string;
  chiropractorState: string;
  xray: boolean;
  ctScan: boolean;
  cdImages: boolean;
  visitDetails: string;
  cellPhoneProvider: string;
}

interface Props {
    medicalHistory: FormValues;
}

export default function MedicalHistoryForm({medicalHistory}:Props){
    return(
        <>
        <Grid item xs={12} className='collapsable-form-style '> 
            <FormLabel sx={{fontWeight:600}}>Physician Hisory Information:</FormLabel>
        </Grid>

        <Grid container direction="row">
            <Grid item xs={4} className='collapsable-form-style'>
                <TextField 
                variant="outlined"
                label="Family physician" 
                name='physicianname'
                value={medicalHistory.physicianname}
                disabled
                />
            </Grid>
            <Grid item xs={4} className='collapsable-form-style'>
                <TextField 
                variant="outlined"
                label="City" 
                name='physiciancity'
                value={medicalHistory.physiciancity}
                disabled
                />
            </Grid>
            <Grid item xs={4} className='collapsable-form-style'>
                 <TextField 
                 variant="outlined"
                 label="State" 
                 name='physicianstate'
                 value={medicalHistory.physicianstate}
                 disabled
                 />
            </Grid>
            <Grid item xs={4} className='collapsable-form-style'>
                <TextField 
                variant="outlined"
                label="Phone" 
                type="number"
                name='physicianphone'
                value={medicalHistory.physicianphone}
                disabled
                />
            </Grid>
            
            <Grid item xs={4} className='collapsable-form-style'></Grid>
            <Grid item xs={4} className='collapsable-form-style'></Grid>

            <Grid item xs={12} className='collapsable-form-style '> 
                <FormLabel sx={{fontWeight:600}}>Chiropractor Information:</FormLabel>
            </Grid>

            <Grid item xs={4} sx={{paddingLeft:"14px",marginTop:2}} className='collapsable-form-style-radioButtons'>
                <FormControl>
                <FormLabel>Previous Chiropractic Care:</FormLabel>
                <RadioGroup
                    aria-labelledby="demo-radio-buttons-group-label"
                    name="radio-buttons-group"
                    sx={{display:'flex', flexDirection:'row'}}
                >
                    <FormControlLabel value="yes" control={<Radio />} label="Yes" />
                    <FormControlLabel value="no" control={<Radio />} label="No" />
                </RadioGroup>
                </FormControl>
            </Grid>

            <Grid item xs={4} className='collapsable-form-style'>
                 <TextField 
                 variant="outlined"
                 label="Chiropractor's Name" 
                 name='chiropractorName'
                 value={medicalHistory.chiropractorName}
                 disabled
                 />
            </Grid>

            <Grid item xs={4} className='collapsable-form-style'>
                 <TextField 
                 variant="outlined"
                 label="City/State" 
                 name='chiropractorState'
                 value={medicalHistory.chiropractorState}
                 disabled
                 />
            </Grid>
        </Grid>

        <Grid item xs={12} sx={{paddingLeft:"14px",marginTop:2}} className='collapsable-form-style-radioButtons-fullwidth'>
            <FormControl>
                <FormLabel>Have you had an X-ray/CT Scan within the last 12 months? If yes, did you bring the CD of images for the doctor to review?</FormLabel>
                <RadioGroup
                    // value={patient.gender}
                    aria-labelledby="demo-radio-buttons-group-label"
                    // defaultValue="yes"
                    name="radio-buttons-group"
                    sx={{display:'flex', flexDirection:'row'}}
                >
                    <FormControlLabel value="yes" control={<Radio />} label="Yes" />
                    <FormControlLabel value="no" control={<Radio />} label="No" />
                </RadioGroup>
            </FormControl>
        </Grid>

        <Grid item xs={12}  className='collapsable-form-style-radioButtons-fullwidth'>
                <FormControl>
                <FormLabel>Who can we thank for referring you to our office:</FormLabel>
                <RadioGroup
                    // value={patient.gender}
                    aria-labelledby="demo-radio-buttons-group-label"
                    // defaultValue="physician"
                    name="radio-buttons-group"
                    sx={{display:'flex', flexDirection:'row'}}
                >
                    <FormControlLabel value="friend" control={<Radio />} label="Friend" />
                    <FormControlLabel value="relative" control={<Radio />} label="Relative" />
                    <FormControlLabel value="physician" control={<Radio />} label="Physician" />
                    <FormControlLabel value="instagram" control={<Radio />} label="Instagram" />
                    <FormControlLabel value="google" control={<Radio />} label="Google" />
                    <FormControlLabel value="others" control={<Radio />} label="Others" />
                </RadioGroup>
            </FormControl>
        </Grid>

        <Grid item xs={12} sx={{paddingLeft:"14px",marginTop:2}} className='collapsable-form-style-radioButtons-fullwidth'>
            <FormControl>
                <FormLabel>How do you prefer to be reminded of your appointments?</FormLabel>
                <RadioGroup
                    // value={patient.gender}
                    aria-labelledby="demo-radio-buttons-group-label"
                    // defaultValue="email"
                    name="radio-buttons-group"
                    sx={{display:'flex', flexDirection:'row'}}
                >
                    <FormControlLabel value="email" control={<Radio />} label="Email" />
                    <FormControlLabel value="text" control={<Radio />} label="Text" />
                </RadioGroup>
            </FormControl>
        </Grid>
        </>
    )}