patient_Information_reactProject/src/Components/PatientForm/FamilyFormSection2.tsx

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

interface Patient {
  maritalStatus: string | undefined;
  numberOfChildren: string | undefined;
  occupation: string | undefined;
  hoursPerWeek: number | string | undefined;
  employer: string | undefined;
  businessPhone: string | undefined;
  spouseName: string | undefined;
  spouseEmployer: string | undefined;
  spouseBusinessPhone: string | undefined;
  emergencyContact: string | undefined;
  relationship: string | undefined;
  spousePhone: string | undefined;
}

type Props = {
  handleFormSection2Data: (
    maritalStatus: string | undefined,
    numberOfChildren: string | undefined,
    occupation: string | undefined,
    hoursPerWeek: number | string | undefined,
    employer: string | undefined,
    businessPhone: string | undefined,
    spouseName: string | undefined,
    spouseEmployer: string | undefined,
    spouseBusinessPhone: string | undefined,
    emergencyContact: string | undefined,
    relationship: string | undefined,
    spousePhone: string | undefined
  ) => void;
  patientDataDiplay: any;
  type: string;
};

export default function FamilyFormSection({
  handleFormSection2Data,
  patientDataDiplay,
  type,
}: Props) {
  const [patient, setPatient] = React.useState<Patient>({
    maritalStatus: '',
    numberOfChildren: '',
    occupation: '',
    hoursPerWeek: '',
    employer: '',
    businessPhone: '',
    spouseName: '',
    spouseEmployer: '',
    spouseBusinessPhone: '',
    emergencyContact: '',
    relationship: '',
    spousePhone: '',
  });

  useEffect(() => {
    handleFormSection2Data(
      patient.maritalStatus,
      patient.numberOfChildren,
      patient.occupation,
      patient.hoursPerWeek,
      patient.employer,
      patient.businessPhone,
      patient.spouseName,
      patient.spouseEmployer,
      patient.spouseBusinessPhone,
      patient.emergencyContact,
      patient.relationship,
      patient.spousePhone
    );
  }, [patient]);

  return (
    <>
      <Grid container direction='row'>
        <Grid item xs={8} className='collapsable-form-style-radioButtons'>
          <FormControl>
            <FormLabel>Marital Status</FormLabel>
            <RadioGroup
              aria-labelledby='demo-radio-buttons-group-label'
              name='maritalStatus'
              defaultValue={
                type == 'display'
                  ? patientDataDiplay.maritalStatus
                  : patient.maritalStatus
              }
              sx={{ display: 'flex', flexDirection: 'row' }}
              onChange={(e) => {
                setPatient((prevValues: any) => ({
                  ...prevValues,
                  maritalStatus: e.target.value,
                }));
              }}
            >
              <FormControlLabel
                value='married'
                control={<Radio />}
                label='Married'
                disabled={type == 'display'}
              />
              <FormControlLabel
                value='single'
                control={<Radio />}
                label='Single'
                disabled={type == 'display'}
              />
              <FormControlLabel
                value='widowed'
                control={<Radio />}
                label='Widowed'
                disabled={type == 'display'}
              />
              <FormControlLabel
                value='seperated'
                control={<Radio />}
                label='Seperated'
                disabled={type == 'display'}
              />
              <FormControlLabel
                value='divorced'
                control={<Radio />}
                label='Divorced'
                disabled={type == 'display'}
              />
            </RadioGroup>
          </FormControl>
        </Grid>

        <Grid item xs={4} className='collapsable-form-style '></Grid>
        <Grid
          item
          xs={12}
          xl={3}
          lg={4}
          md={6}
          sm={12}
          className='collapsable-form-style '
        >
          <TextField
            variant='outlined'
            type='number'
            label='Number of Children/Ages'
            className='collapsable-form-style'
            name='numberOfChildren'
            onChange={(e) => {
              setPatient((prevValues: any) => ({
                ...prevValues,
                numberOfChildren: e.target.value,
              }));
            }}
            value={
              type == 'display'
                ? patientDataDiplay.numberOfChildren
                : patient.numberOfChildren
            }
            disabled={type == 'display'}
          />
        </Grid>
        <Grid
          item
          xs={12}
          xl={3}
          lg={4}
          md={6}
          sm={12}
          className='collapsable-form-style '
        >
          <TextField
            // required
            variant='outlined'
            label='Occupation'
            className='collapsable-form-style'
            name='occupation'
            onChange={(e) => {
              setPatient((prevValues: any) => ({
                ...prevValues,
                occupation: e.target.value,
              }));
            }}
            value={
              type == 'display'
                ? patientDataDiplay.occupation
                : patient.occupation
            }
            disabled={type == 'display'}
          />
        </Grid>
        <Grid
          item
          xs={12}
          xl={3}
          lg={4}
          md={6}
          sm={12}
          className='collapsable-form-style '
        >
          <TextField
            variant='outlined'
            label='Hours/Week'
            type='number'
            className='collapsable-form-style'
            name='hoursPerWeek'
            onChange={(e) => {
              setPatient((prevValues: any) => ({
                ...prevValues,
                hoursPerWeek: e.target.value,
              }));
            }}
            value={
              type == 'display'
                ? patientDataDiplay.hoursPerWeek
                : patient.hoursPerWeek
            }
            disabled={type == 'display'}
          />
        </Grid>
        <Grid
          xs={12}
          xl={3}
          lg={4}
          md={6}
          sm={12}
          className='collapsable-form-style '
        >
          <TextField
            variant='outlined'
            label='Employer'
            className='collapsable-form-style'
            name='employer'
            onChange={(e) => {
              setPatient((prevValues: any) => ({
                ...prevValues,
                employer: e.target.value,
              }));
            }}
            value={
              type == 'display' ? patientDataDiplay.employer : patient.employer
            }
            disabled={type == 'display'}
          />
        </Grid>
        <Grid
          item
          xs={12}
          xl={3}
          lg={4}
          md={6}
          sm={12}
          className='collapsable-form-style '
        >
          <TextField
            variant='outlined'
            label='Business Phone'
            type='number'
            className='collapsable-form-style'
            name='businessPhone'
            onChange={(e) => {
              setPatient((prevValues: any) => ({
                ...prevValues,
                businessPhone: e.target.value,
              }));
            }}
            value={
              type == 'display'
                ? patientDataDiplay.businessPhone
                : patient.businessPhone
            }
            disabled={type == 'display'}
          />
        </Grid>

        <Grid
          item
          xs={12}
          xl={3}
          lg={4}
          md={6}
          sm={12}
          className='collapsable-form-style '
        ></Grid>

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

        <Grid
          item
          xs={12}
          xl={3}
          lg={4}
          md={6}
          sm={12}
          className='collapsable-form-style '
        >
          <TextField
            variant='outlined'
            label="Spouse's Name"
            className='collapsable-form-style'
            name='spouseName'
            onChange={(e) => {
              setPatient((prevValues: any) => ({
                ...prevValues,
                spouseName: e.target.value,
              }));
            }}
            value={
              type == 'display'
                ? patientDataDiplay.spouseName
                : patient.spouseName
            }
            disabled={type == 'display'}
          />
        </Grid>
        <Grid
          item
          xs={12}
          xl={3}
          lg={4}
          md={6}
          sm={12}
          className='collapsable-form-style '
        >
          <TextField
            variant='outlined'
            label="Spouse's Employer"
            className='collapsable-form-style'
            name='spouseEmployer'
            onChange={(e) => {
              setPatient((prevValues: any) => ({
                ...prevValues,
                spouseEmployer: e.target.value,
              }));
            }}
            value={
              type == 'display'
                ? patientDataDiplay.spouseEmployer
                : patient.spouseEmployer
            }
            disabled={type == 'display'}
          />
        </Grid>
        <Grid
          item
          xs={12}
          xl={3}
          lg={4}
          md={6}
          sm={12}
          className='collapsable-form-style '
        >
          <TextField
            variant='outlined'
            label='Business Phone'
            type='number'
            className='collapsable-form-style'
            name='spouseBusinessPhone'
            onChange={(e) => {
              setPatient((prevValues: any) => ({
                ...prevValues,
                spouseBusinessPhone: e.target.value,
              }));
            }}
            value={
              type == 'display'
                ? patientDataDiplay.spouseBusinessPhone
                : patient.spouseBusinessPhone
            }
            disabled={type == 'display'}
          />
        </Grid>

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

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