right-tree/frontend/src/components/steps/summary/SummaryContent.js

import * as React from 'react';
import Accordion from '@mui/material/Accordion';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails from '@mui/material/AccordionDetails';
import Typography from '@mui/material/Typography';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

import SummaryTable from './SummaryTable'
import LocationRepository from '../../../repository/LocationRepository'


export default function SummaryContent(props) {
    const [expanded, setExpanded] = React.useState(null);
    const [locationDetails, setLocationDetails] = React.useState({})

    const getLocationDetails = () => {
        LocationRepository.getLocationData(props.filters).then(result => {
            setLocationDetails(result);
        })
    }

    const handleChange = (panel) => (event, isExpanded) => {
        setExpanded(isExpanded ? panel : false);
      };

    React.useEffect(() => {
        props.setNextDisabled(false);
        !Object.keys(locationDetails).length && getLocationDetails()
    });

    function createData(name, value) {
        return { name, value };
    }

    const locationData = [
        createData('Geographical Coordinates (latitude, longitude)', `(${props.filters.coordinates.lat}, ${props.filters.coordinates.lng})`),
        createData('Ecological Region', locationDetails.ecological_region || ''),
        createData('Ecological District', locationDetails.ecological_district || ''),
        createData('Property Name', locationDetails.full_address || ''),
    ];

    const soilData = [
        createData('Soil Order', `${locationDetails.soil_name} (${locationDetails.soil_code})` || ''),
        createData('Soil Variant', props.filters.soilVariant)
    ];

    const siteData = [
        createData('Habitat', ''),
        createData('Zone', '')
    ];

    const projectSpecificsData = [
        createData('Requrements', '')
    ];

    return (
        <div className='summary-content'>
            <Typography mb={2} mt={2} >Please review your choices presented below: </Typography>
            <Accordion expanded={expanded === 'panel1'} onChange={handleChange('panel1')} >
                <AccordionSummary
                    expandIcon={<ExpandMoreIcon />}
                >
                    <Typography>1. Location Data</Typography>
                </AccordionSummary>
                <AccordionDetails>
                    <SummaryTable rows={locationData} />
                </AccordionDetails>
            </Accordion>
            <Accordion  expanded={expanded === 'panel2'} onChange={handleChange('panel2')} >
                <AccordionSummary
                    expandIcon={<ExpandMoreIcon />}
                >
                    <Typography>2. Soil Properties</Typography>
                </AccordionSummary>
                <AccordionDetails>
                    <SummaryTable rows={soilData} />
                </AccordionDetails>
            </Accordion>
            <Accordion  expanded={expanded === 'panel3'} onChange={handleChange('panel3')} >
                <AccordionSummary
                    expandIcon={<ExpandMoreIcon />}
                >
                    <Typography>3. Project Site Details</Typography>
                </AccordionSummary>
                <AccordionDetails>
                    <SummaryTable rows={siteData} />
                </AccordionDetails>
            </Accordion>
            <Accordion expanded={expanded === 'panel4'} onChange={handleChange('panel4')} >
                <AccordionSummary expandIcon={<ExpandMoreIcon />} >
                    <Typography>4. Project Specifics</Typography>
                </AccordionSummary>
                <AccordionDetails>
                    <SummaryTable rows={projectSpecificsData} />
                </AccordionDetails>
            </Accordion>
        </div>
    )
}