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';
import { Patient } from '../Interface/Patient';

type Props = {
  handleFormSection1Data: (patient: Patient) => 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',
  });

  const [errors, setErrors] = React.useState<any>({
    fullNameError: false,
    cellPhoneError: false,
    emailError: false,
    ageError: false,
    mailingAddressFalse: false,
  });

  useEffect(() => {
    handleFormSection1Data(patient);
  }, [patient]);

  return (
    <>
      <Grid container direction='row' className='section1-test-class'>
        <Grid
          item
          xs={12}
          xl={3}
          lg={4}
          md={6}
          sm={12}
          className='collapsable-form-style '
        >
          <TextField
            variant='outlined'
            label="Patient's Full Name"
            name='fullName'
            placeholder='Please enter your name'
            value={
              type == 'display'
                ? patientDataDiplay && patientDataDiplay.fullName
                : patient.fullName
            }
            disabled={type == 'display'}
            onChange={(e) => {
              setPatient((prevValues: any) => ({
                ...prevValues,
                fullName: e.target.value,
              }));
            }}
            onBlur={(e) => {
              if (e.target.value === '') {
                setErrors((prevValues: any) => ({
                  ...prevValues,
                  fullNameError: true,
                }));
              } else {
                setErrors((prevValues: any) => ({
                  ...prevValues,
                  fullNameError: false,
                }));
              }
            }}
            required
            error={errors.fullNameError}
            helperText={errors.fullNameError ? 'Please enter your name' : ''}
          />
        </Grid>

        <Grid
          item
          xs={12}
          xl={3}
          lg={4}
          md={6}
          sm={12}
          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 && patientDataDiplay.cellPhone
                : patient.cellPhone
            }
            disabled={type == 'display'}
            onChange={(e) => {
              let value = e.target.value;
              if (value[0] === '0') {
                value = value.slice(1);
              }
              setPatient((prevValues: any) => ({
                ...prevValues,
                cellPhone: value,
              }));
            }}
            onBlur={(e) => {
              if (!/^\d{10}$/.test(e.target.value)) {
                setErrors((prevValues: any) => ({
                  ...prevValues,
                  cellPhoneError: true,
                }));
              } else {
                setErrors((prevValues: any) => ({
                  ...prevValues,
                  cellPhoneError: false,
                }));
              }
            }}
            error={errors.cellPhoneError}
            helperText={
              errors.cellPhoneError
                ? 'Please enter a valid 10-digit phone number'
                : ''
            }
          />
        </Grid>

        <Grid
          item
          xs={12}
          xl={3}
          lg={4}
          md={6}
          sm={12}
          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 && patientDataDiplay.homePhone
                : patient.homePhone
            }
            disabled={type == 'display'}
            onChange={(e) => {
              setPatient((prevValues: any) => ({
                ...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={12}
          xl={3}
          lg={4}
          md={6}
          sm={12}
          className='collapsable-form-style'
        >
          <TextField
            required
            variant='outlined'
            label='Email'
            name='email'
            placeholder='Please enter your email'
            value={
              type == 'display'
                ? patientDataDiplay && patientDataDiplay.email
                : patient.email
            }
            disabled={type == 'display'}
            onChange={(e) => {
              setPatient((prevValues: any) => ({
                ...prevValues,
                email: e.target.value,
              }));
            }}
            onBlur={(e) => {
              if (!/^\S+@\S+\.\S+$/.test(e.target.value)) {
                setErrors((prevValues: any) => ({
                  ...prevValues,
                  emailError: true,
                }));
              } else {
                setErrors((prevValues: any) => ({
                  ...prevValues,
                  emailError: false,
                }));
              }
            }}
            error={errors.emailError}
            helperText={
              errors.emailError ? 'Please enter a valid email address' : ''
            }
          />
        </Grid>
        <Grid
          item
          xs={12}
          xl={3}
          lg={4}
          md={6}
          sm={12}
          className='collapsable-form-style'
        >
          <TextField
            required
            variant='outlined'
            label='Age'
            name='age'
            type='number'
            placeholder='Please enter your age'
            value={
              type == 'display'
                ? patientDataDiplay && patientDataDiplay.age
                : patient.age
            }
            disabled={type == 'display'}
            onChange={(e) => {
              setPatient((prevValues: any) => ({
                ...prevValues,
                age: e.target.value,
              }));
            }}
            onBlur={(e) => {
              if (e.target.value === '') {
                setErrors((prevValues: any) => ({
                  ...prevValues,
                  ageError: true,
                }));
              } else {
                setErrors((prevValues: any) => ({
                  ...prevValues,
                  ageError: false,
                }));
              }
            }}
            error={errors.ageError}
            helperText={errors.ageError ? 'Please enter your age' : ''}
          />
        </Grid>

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

        <Grid
          item
          xs={12}
          xl={3}
          lg={4}
          md={6}
          sm={12}
          className='collapsable-form-style'
        >
          <TextField
            variant='outlined'
            label='Social Security Number'
            name='socialSecurityNumber'
            value={
              type == 'display'
                ? patientDataDiplay && patientDataDiplay.socialSecurityNumber
                : patient.socialSecurityNumber
            }
            disabled={type == 'display'}
            onChange={(e) => {
              setPatient((prevValues: any) => ({
                ...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={12}
          xl={3}
          lg={4}
          md={6}
          sm={12}
          className='collapsable-form-style'
        >
          <TextField
            required
            variant='outlined'
            label='Mailing Address'
            name='mailingAddress'
            value={
              type == 'display'
                ? patientDataDiplay && patientDataDiplay.mailingAddress
                : patient.mailingAddress
            }
            disabled={type == 'display'}
            onChange={(e) => {
              setPatient((prevValues: any) => ({
                ...prevValues,
                mailingAddress: e.target.value,
              }));
            }}
            onBlur={(e) => {
              if (e.target.value === '') {
                setErrors((prevValues: any) => ({
                  ...prevValues,
                  mailingAddressError: true,
                }));
              } else {
                setErrors((prevValues: any) => ({
                  ...prevValues,
                  mailingAddressError: false,
                }));
              }
            }}
            error={errors.mailingAddressError}
            helperText={
              errors.mailingAddressError
                ? 'Please enter your mailing address'
                : ''
            }
          />
        </Grid>

        <Grid
          item
          xs={12}
          xl={3}
          lg={4}
          md={6}
          sm={12}
          className='collapsable-form-style'
        >
          <TextField
            variant='outlined'
            label='State'
            name='state'
            value={
              type == 'display'
                ? patientDataDiplay && patientDataDiplay.state
                : patient.state
            }
            disabled={type == 'display'}
            onChange={(e) => {
              setPatient((prevValues: any) => ({
                ...prevValues,
                state: e.target.value,
              }));
            }}
          />
        </Grid>

        <Grid
          item
          xs={12}
          xl={3}
          lg={4}
          md={6}
          sm={12}
          className='collapsable-form-style'
        >
          <TextField
            variant='outlined'
            label='City'
            name='city'
            value={
              type == 'display'
                ? patientDataDiplay && patientDataDiplay.city
                : patient.city
            }
            disabled={type == 'display'}
            onChange={(e) => {
              setPatient((prevValues: any) => ({
                ...prevValues,
                city: e.target.value,
              }));
            }}
          />
        </Grid>

        <Grid
          item
          xs={12}
          xl={3}
          lg={4}
          md={6}
          sm={12}
          className='collapsable-form-style'
        >
          <TextField
            variant='outlined'
            label='Zip Code'
            name='zipCode'
            value={
              type == 'display'
                ? patientDataDiplay && patientDataDiplay.zipCode
                : patient.zipCode
            }
            disabled={type == 'display'}
            onChange={(e) => {
              setPatient((prevValues: any) => ({
                ...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={12}
          xl={3}
          lg={4}
          md={6}
          sm={12}
          className='collapsable-form-style-radioButtons'
        >
          <FormControl>
            <FormLabel>Gender</FormLabel>
            <RadioGroup
              aria-labelledby='demo-radio-buttons-group-label'
              defaultValue={
                type == 'display'
                  ? patientDataDiplay && patientDataDiplay.gender
                  : patient.gender
              }
              name='radio-buttons-group'
              onChange={(e) => {
                setPatient((prevValues: any) => ({
                  ...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>
    </>
  );
}