patient_Information_reactProject/src/Components/PatientForm/PersonalSection1.tsx

import * as React from 'react';
import { Button, FormControl, FormControlLabel, FormLabel, Grid, Paper, Radio, RadioGroup, TextField } from '@mui/material';
import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { useEffect } from 'react';

interface Patient {
    fullName: string;
    homePhone: string;
    cellPhone: string;
    email: string;
    age: number | string;
    dateOfBirth: string;
    socialSecurityNumber: string;
    mailingAddress: string;
    city: string;
    state: string;
    zipCode: string;
    gender: string;
  }

  type Props = {
    handleFormSection1Data:(
        fullName?: string|undefined,
        homePhone?: string|undefined,
        cellPhone?: string|undefined,
        email?: string|undefined,
        age?: number|undefined|string,
        dateOfBirth?: string|undefined,
        socialSecurityNumber?: string|undefined,
        mailingAddress?: string|undefined,
        city?: string|undefined,
        state?: string|undefined,
        zipCode?: string|undefined,
        gender?: string|undefined,
    )=> void
    patientDataDiplay:any;
    type:string;
  }
  

export default function PersonalSection({handleFormSection1Data,patientDataDiplay,type}:Props){

    const [birthDateValue, setBirthDateValue] = React.useState<any>();
    const [patient, setPatient] = React.useState<Patient>({
        fullName: "",
        homePhone: "",
        cellPhone: "",
        email: "",
        age: "",
        dateOfBirth: birthDateValue,
        socialSecurityNumber: "",
        mailingAddress:"",
        city: "",
        state: "",
        zipCode: "",
        gender: "male",
      });


      useEffect(()=>{
        handleFormSection1Data(
            patient.fullName,
            patient.homePhone,
            patient.cellPhone,
            patient.email,
            patient.age,
            birthDateValue,
            patient.socialSecurityNumber,
            patient.mailingAddress,
            patient.city,
            patient.state,
            patient.zipCode,
            patient.gender,
        )
      },[patient])    

     
    
    return(
        <>
        <Grid container direction="row" className='section1-test-class'>
                <Grid item xs={4} className='collapsable-form-style '>
                <TextField
                    variant="outlined"
                    label="Patient's Full Name"
                    name="fullName"
                    placeholder='Please enter your name'
                    value={type=='display'?patientDataDiplay.fullName:patient.fullName}
                    disabled={type=='display'}
                    onChange={(e)=>{
                        setPatient((prevValues) => ({
                            ...prevValues,
                            fullName: e.target.value,
                          }));
                    }}
                    required
                    error={patient.fullName === ""}
                    helperText={patient.fullName === "" ? "Please enter your name" : ""}
                />
                </Grid>
               
                <Grid item xs={4} className='collapsable-form-style'>
                <TextField
                    required
                    variant="outlined"
                    label="Phone Number"
                    name="cellPhone"
                    type="number"
                    placeholder='Please enter your cell Phone number'
                    value={type=='display'?patientDataDiplay.cellPhone:patient.cellPhone}
                    disabled={type=='display'}
                    onChange={(e)=>{
                        setPatient((prevValues) => ({
                            ...prevValues,
                            cellPhone: e.target.value,
                          }));
                    }}
                    error={!(/^\d{10}$/.test(patient.cellPhone))}
                    helperText={!(/^\d{10}$/.test(patient.cellPhone)) ? "Please enter a valid 10-digit phone number" : ""}
                />
                </Grid>

                <Grid item xs={4} className='collapsable-form-style'>
                <TextField
                    variant="outlined"
                    label="Home Phone Number"
                    name="homePhone"
                    type='number'
                    placeholder='Please enter your home phone'
                    value={type=='display'?patientDataDiplay.homePhone:patient.homePhone}
                    disabled={type=='display'}
                    onChange={(e)=>{
                        setPatient((prevValues) => ({
                            ...prevValues,
                            homePhone: e.target.value,
                          }));
                    }}
                    // error={!(/^\d{10}$/.test(patient.homePhone))}
                    // helperText={!(/^\d{10}$/.test(patient.homePhone)) ? "Please enter a valid 10-digit phone number" : ""}
                />
                </Grid>

                <Grid item xs={4} className='collapsable-form-style'>
                <TextField
                    required
                    variant="outlined"
                    label="Email"
                    name="email"
                    placeholder='Please enter your email'
                    value={type=='display'?patientDataDiplay.email:patient.email}
                    disabled={type=='display'}
                    onChange={(e)=>{
                        setPatient((prevValues) => ({
                            ...prevValues,
                            email: e.target.value,
                          }));
                    }}
                    error={!(/^\S+@\S+\.\S+$/.test(patient.email))}
                    helperText={!(/^\S+@\S+\.\S+$/.test(patient.email)) ? "Please enter a valid email address" : ""}
                />
                </Grid>
                <Grid item xs={4} className='collapsable-form-style'>
                <TextField
                    required
                    variant="outlined"
                    label="Age"
                    name="age"
                    type="number"
                    placeholder='Please enter your age'
                    value={type=='display'?patientDataDiplay.age:patient.age}
                    disabled={type=='display'}
                    onChange={(e)=>{
                        setPatient((prevValues) => ({
                            ...prevValues,
                            age: e.target.value,
                          }));
                    }}
                    error={patient.age === ""}
                    helperText={patient.age === "" ? "Please enter your age" : ""}
                    
                />
                </Grid>

                <Grid item xs={4} className='collapsable-form-style'>
                <FormControl >
                <LocalizationProvider dateAdapter={AdapterDayjs}>
                    <DatePicker
                    label="Date of Birth"
                    value={type=='display'?patientDataDiplay.dateOfBirth:birthDateValue}
                    disabled={type=='display'}
                    onChange={(newValue) => {
                        setBirthDateValue(newValue);
                    }}
                    renderInput={(params) => <TextField required  variant="outlined" {...params} />}
                    />
                </LocalizationProvider>
                </FormControl>
            
                </Grid>

                <Grid item xs={4} className='collapsable-form-style'>
                <TextField
                    variant="outlined"
                    label="Social Security Number"
                    name="socialSecurityNumber"
                    value={type=='display'?patientDataDiplay.socialSecurityNumber:patient.socialSecurityNumber}
                    disabled={type=='display'}
                    onChange={(e)=>{
                        setPatient((prevValues) => ({
                            ...prevValues,
                            socialSecurityNumber: e.target.value,
                          }));
                    }}
                    // onBlur={formik.handleBlur}
                    // error={formik.touched.socialSecurityNumber && Boolean(formik.errors.socialSecurityNumber)}
                    // helperText={formik.touched.socialSecurityNumber && formik.errors.socialSecurityNumber}
                />
                </Grid>

                <Grid item xs={4} className='collapsable-form-style'>
                    <TextField
                        required
                        variant="outlined"
                        label="Mailing Address"
                        name="mailingAddress"
                        value={type=='display'?patientDataDiplay.mailingAddress:patient.mailingAddress}
                        disabled={type=='display'}
                        onChange={(e)=>{
                            setPatient((prevValues) => ({
                                ...prevValues,
                                mailingAddress: e.target.value,
                              }));
                        }}
                        error={patient.mailingAddress === ""}
                        helperText={patient.mailingAddress === "" ? "Please enter your mailing address" : ""}
                    />
                </Grid>                
            
                <Grid item xs={4} className='collapsable-form-style'>
                <TextField
                    variant="outlined"
                    label="State"
                    name="state"
                    value={type=='display'?patientDataDiplay.state:patient.state}
                    disabled={type=='display'}
                    onChange={(e)=>{
                        setPatient((prevValues) => ({
                            ...prevValues,
                            state: e.target.value,
                          }));
                    }}
                />
                </Grid>

                <Grid item xs={4} className='collapsable-form-style'>
                    <TextField
                        variant="outlined"
                        label="City"
                        name="city"
                        value={type=='display'?patientDataDiplay.city:patient.city}
                        disabled={type=='display'}
                        onChange={(e)=>{
                            setPatient((prevValues) => ({
                                ...prevValues,
                                city: e.target.value,
                              }));
                        }}
                    />
                </Grid>
                
                <Grid item xs={4} className='collapsable-form-style'>
                <TextField
                    variant="outlined"
                    label="Zip Code"
                    name="zipCode"
                    value={type=='display'?patientDataDiplay.zipCode:patient.zipCode}
                    disabled={type=='display'}
                    onChange={(e)=>{
                        setPatient((prevValues) => ({
                            ...prevValues,
                            zipCode: e.target.value,
                          }));
                    }}
                    // onBlur={formik.handleBlur}
                    // error={formik.touched.zipCode && Boolean(formik.errors.zipCode)}
                    // helperText={formik.touched.zipCode && formik.errors.zipCode}
                />
                </Grid>

                <Grid item xs={4} className='collapsable-form-style-radioButtons'>
                <FormControl >
                <FormLabel>Gender</FormLabel>
                <RadioGroup
                    aria-labelledby="demo-radio-buttons-group-label"
                    defaultValue={type=='display'?patientDataDiplay.gender:patient.gender}
                    name="radio-buttons-group"
                    onChange={(e)=>{
                        setPatient((prevValues) => ({
                            ...prevValues,
                            gender: e.target.value,
                          }));
                    }}
                    sx={{display:'flex', flexDirection:'row'}}
                >
                    <FormControlLabel
                        disabled={type=='display'}
                         value="male" control={<Radio />} label="Male" />
                    <FormControlLabel 
                        disabled={type=='display'}
                        value="female" control={<Radio />} label="Female" />
                </RadioGroup>
                </FormControl>
                </Grid>
            </Grid>       
        </>
    )
}