patient_Information_reactProject/src/Components/PatientForm/PatientForm.tsx

import * as React from 'react';
import Typography from '@mui/material/Typography';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import Footer from "../Footer";
import Header from "../Header";
import {Button, Checkbox, FormControlLabel, FormGroup, Grid, Paper, Radio, RadioGroup, TextField } from '@mui/material';
import PersonalSection from './PersonalSection1';
import { styled } from '@mui/material/styles';
import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp';
import MuiAccordion, { AccordionProps } from '@mui/material/Accordion';
import MuiAccordionSummary, {
  AccordionSummaryProps,
} from '@mui/material/AccordionSummary';
import MuiAccordionDetails from '@mui/material/AccordionDetails';
import MedicalHistory from './MedicalHistorySection3';
import FamilyFormSection from './FamilyFormSection2';
import PainAnalysisSection4 from './PainAnalysisSection4';
import PastTreatment5 from './PastTreatment5';
import SystemReviewSection6 from './SyestemReviewSection6';

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

  const Accordion = styled((props: AccordionProps) => (
    <MuiAccordion disableGutters elevation={0} square {...props} />
  ))(({ theme }) => ({
    border: `1px solid ${theme.palette.divider}`,
    '&:not(:last-child)': {
      borderBottom: 0,
    },
    '&:before': {
      display: 'none',
    },
  }));
  
  const AccordionSummary = styled((props: AccordionSummaryProps) => (
    <MuiAccordionSummary
      expandIcon={<ArrowForwardIosSharpIcon sx={{ fontSize: '0.9rem' }} />}
      {...props}
    />
  ))(({ theme }) => ({
    backgroundColor:
      theme.palette.mode === 'dark'
        ? 'rgba(255, 255, 255, .05)'
        : 'rgba(0, 0, 0, .03)',
    flexDirection: 'row-reverse',
    '& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
      transform: 'rotate(90deg)',
    },
    '& .MuiAccordionSummary-content': {
      marginLeft: theme.spacing(1),
    },
  }));
  
  const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
    padding: theme.spacing(2),
    borderTop: '1px solid rgba(0, 0, 0, .125)',
  }));

export default function PatientForm(){
    const [expanded, setExpanded] = React.useState<string | false>('panel1');
    const [isChecked, setIsChecked] = React.useState(false);
 
    const [patient, setPatient] = React.useState<Patient>({
        fullName: "",
        homePhone: "",
        cellPhone: "",
        email: "",
        age: 0,
        dateOfBirth: "",
        socialSecurityNumber: "",
        mailingAddress: "",
        city: "",
        state: "",
        zipCode: "",
        gender: "",
        maritalStatus: "",
      });
    
      const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
        event.preventDefault();
      };

      const handleExpandChange =
        (panel: string) => (event: React.SyntheticEvent, newExpanded: boolean) => {
        setExpanded(newExpanded ? panel : false);
        };
 
      const handleCheckboxChange = (event:any) => {
        setIsChecked(event.target.checked);
      };
    

    return(
        <>
            <Paper elevation={0} className='app-screen-constants'>
                <Header/>
                    <Paper  elevation={0} sx={{margin:4, minHeight:700}} >
                    <form onSubmit={handleSubmit}>
                        <Typography sx={{fontSize:20}}  gutterBottom>
                            Confidential Patient Information
                        </Typography>
                        <Grid>
                        <Accordion expanded={expanded === 'panel1'} onChange={handleExpandChange('panel1')}>
                            
                            <AccordionSummary
                                expandIcon={<ExpandMoreIcon />}
                                aria-controls="panel1a-content"
                                id="panel1a-header"
                                >
                                <Typography sx={{fontSize:18}}>Patient's Personal Information</Typography>
                            </AccordionSummary>
                           
                            <AccordionDetails>
                                <PersonalSection/>
                            </AccordionDetails>
                           
                        </Accordion>

                        <Accordion expanded={expanded === 'panel2'} onChange={handleExpandChange('panel2')}>
                            <AccordionSummary aria-controls="panel2d-content" id="panel2d-header">
                                <Typography sx={{fontSize:18}}>Patient's Family Information</Typography>
                            </AccordionSummary>

                            <AccordionDetails>
                                <FamilyFormSection/>
                            </AccordionDetails>
                        </Accordion>

                        <Accordion expanded={expanded === 'panel3'} onChange={handleExpandChange('panel3')}>
                            <AccordionSummary aria-controls="panel3d-content" id="panel3d-header">
                                <Typography sx={{fontSize:18}}>Patient's Medical History Information</Typography>
                            </AccordionSummary>
                            
                            <AccordionDetails>
                                <MedicalHistory/>
                            </AccordionDetails>
                        </Accordion>

                        <Accordion expanded={expanded === 'panel4'} onChange={handleExpandChange('panel4')}>
                            <AccordionSummary aria-controls="panel4d-content" id="panel4d-header">
                                <Typography sx={{fontSize:18}}>Patient's Injury Details</Typography>
                            </AccordionSummary>
                            
                            <AccordionDetails>
                                <PainAnalysisSection4/>
                            </AccordionDetails>
                        </Accordion>

                        <Accordion expanded={expanded === 'panel5'} onChange={handleExpandChange('panel5')}>
                            <AccordionSummary aria-controls="panel5d-content" id="panel5d-header">
                                <Typography sx={{fontSize:18}}>Patient's Past Treatment Details</Typography>
                            </AccordionSummary>
                            
                            <AccordionDetails>
                                <PastTreatment5/>
                            </AccordionDetails>
                        </Accordion>

                        <Accordion expanded={expanded === 'panel6'} onChange={handleExpandChange('panel6')}>
                            <AccordionSummary aria-controls="panel6d-content" id="panel6d-header">
                                <Typography sx={{fontSize:18}}>System Review Questions</Typography>
                            </AccordionSummary>
                            
                            <AccordionDetails>
                                <SystemReviewSection6/>
                            </AccordionDetails>
                        </Accordion>

                        <FormGroup sx={{ marginTop: 3 }}>
                          <FormControlLabel
                            required
                            control={<Checkbox checked={isChecked} onChange={handleCheckboxChange} />}
                            label="I hereby state that all the information I have provided is complete and truthful and that I have fully disclosed my health history."
                          />
                        </FormGroup>
                     

                        <Grid>
                          <Button
                            type="submit"
                            variant="contained"
                            color="primary"
                            sx={{ margin: 5, left: '40%', width: '200px' }}
                            disabled={isChecked==false}
                          >
                            Submit
                          </Button>
                        </Grid>
                   
                        </Grid>
                        </form>
                       
                    </Paper>
                <Footer/>
             </Paper>
        </>
    )
}