From 4b8d9e93d8aa45123ee71342c921d1997d155736 Mon Sep 17 00:00:00 2001
From: cooper-roper <cooproper@hotmail.com>
Date: Tue, 9 Apr 2024 11:03:15 -0700
Subject: [PATCH] Made Dialog component for 'How we calc...' button

---
 .../Results/EnergyScore/calcbutton.jsx        | 95 ++++++++++++++++++-
 .../Results/EnergyScore/energyscore.jsx       |  7 +-
 .../IndividualScore/individualscore.jsx       |  8 +-
 src/pages/Results.jsx                         | 20 +++-
 src/styles/page.css                           |  2 +-
 5 files changed, 121 insertions(+), 11 deletions(-)

diff --git a/src/components/Results/EnergyScore/calcbutton.jsx b/src/components/Results/EnergyScore/calcbutton.jsx
index db7fc98..5450a23 100644
--- a/src/components/Results/EnergyScore/calcbutton.jsx
+++ b/src/components/Results/EnergyScore/calcbutton.jsx
@@ -1,9 +1,87 @@
 import React, { useState } from 'react';
-import { Button } from '@mui/material';
-import { sparkles } from 'ionicons/icons';
+import { Button, Dialog, DialogTitle, DialogContent, Card, CardContent, Typography, Box, Grid } from '@mui/material';
 import { IonIcon } from '@ionic/react';
+import { star } from 'ionicons/icons';
 
-const CalcButton = () => {
+const ScoreBlock = ({ score }) => (
+  <Grid container direction="column" justifyContent="center" alignItems="center" style={{ height: '50vh' }}>
+    <Typography variant="h4" align="center">Your Home's Clean Energy Score:</Typography>
+    <Typography variant="h2" align="center">{score} out of 100</Typography>
+    <Typography variant="body1" align="center">Your score is based on the estimated CO2 emissions of your home.</Typography>
+    <Box mt={3}>
+      <Typography variant="body1" align="center">
+        <span style={{ color: 'darkred' }}>0</span> = the highest possible emissions
+      </Typography>
+      <Typography variant="body1" align="center">
+        <span style={{ color: 'gold' }}>50</span> = an average home
+      </Typography>
+      <Typography variant="body1" align="center">
+        <span style={{ color: 'teal' }}>100</span> = a zero-emissions home
+      </Typography>
+    </Box>
+  </Grid>
+);
+
+const ScoreDetailsCard = (props) => {
+  const {
+    zipCode,
+    state,
+    solarIndex,
+    heatingDegreeDays,
+    coolingDegreeDays,
+    groundWaterTemp,
+    homeVolume,
+    airChangesPerHour,
+    wallRValue,
+    atticRValue,
+    glazingPercentage,
+    heatLossBTUs,
+    solarHeatGainBTUs
+  } = props.props;
+  return (
+    <Card>
+      <CardContent>
+        <Typography variant="h6" gutterBottom>
+          The Science Behind Your Score
+        </Typography>
+        <Typography paragraph>
+          Many things go into estimating the CO₂ emissions of a home - the size of your home, the outside temperature through the year, the materials and insulation in your home, and much more!
+        </Typography>
+        <Typography paragraph>
+          Here's a look at what we estimated some of those factors to be based on your answers.
+        </Typography>
+        
+        <Box my={2}>
+          <Typography variant="subtitle1">What we estimate:</Typography>
+          
+          <Grid container>
+            <Grid item xs={6}>
+              <Typography variant="subtitle2">Your Location</Typography>
+              <Typography>- Zip Code: {zipCode}</Typography>
+              <Typography>- State: {state}</Typography>
+              <Typography>- Average Solar Index: {solarIndex}</Typography>
+              <Typography>- Annual Heating Degree Days: {heatingDegreeDays}</Typography>
+              <Typography>- Annual Cooling Degree Days: {coolingDegreeDays}</Typography>
+              <Typography>- Average Ground Water Temp: {groundWaterTemp}° F</Typography>
+            </Grid>
+            <Grid item xs={6}>
+              <Typography variant="subtitle2">Your Home</Typography>
+              <Typography>- Home Volume: {homeVolume} ft³</Typography>
+              <Typography>- Air Changes per Hour (ACH): {airChangesPerHour}</Typography>
+              <Typography>- Insulated Wall R Value: {wallRValue}</Typography>
+              <Typography>- Insulated Attic/Roof R Value: {atticRValue}</Typography>
+              <Typography>- Glazing Percentage: {glazingPercentage}%</Typography>
+              <Typography>- Annual BTUs of Heat Loss: {heatLossBTUs} million</Typography>
+              <Typography>- Annual BTUs of Solar Heat Gain: {solarHeatGainBTUs} million</Typography>
+            </Grid>
+          </Grid>
+        </Box>
+      </CardContent>
+    </Card>
+  );
+};
+
+const CalcButton = (props) => {
   const [open, setOpen] = useState(false);
 
   const handleClickOpen = () => {
@@ -17,9 +95,18 @@ const CalcButton = () => {
   return (
     <div>
       <Button onClick={handleClickOpen} style={{ width: '100%' }}>
-        <IonIcon icon={sparkles} style={{ fontSize: '30px', margin: '10px' }} />
+        <IonIcon icon={star} style={{ fontSize: '30px', margin: '10px' }} />
         How We Calculate this
       </Button>
+      <Dialog open={open} onClose={handleClose}>
+        <DialogTitle>Calculation Guide:</DialogTitle>
+        <DialogContent>
+          <ScoreBlock score={props.score} />
+          <ScoreDetailsCard
+            props={props.details}
+          />
+        </DialogContent>
+      </Dialog>
     </div>
   );
 };
diff --git a/src/components/Results/EnergyScore/energyscore.jsx b/src/components/Results/EnergyScore/energyscore.jsx
index db93b70..b2639f7 100644
--- a/src/components/Results/EnergyScore/energyscore.jsx
+++ b/src/components/Results/EnergyScore/energyscore.jsx
@@ -29,7 +29,7 @@ const EnergyScore = (props) => {
             }}
           >
             <div style={{ width: '75%', height: '100%', marginRight: '20px' }}>
-              <ScoreRing value={75} scoreLabel={'Good'} />
+              <ScoreRing value={props.score} scoreLabel={'Good'} />
             </div>
             <div style={{ width: '60%' }}>
               <h2>Score is based on the estimated CO2 emissions of your home</h2>
@@ -37,7 +37,10 @@ const EnergyScore = (props) => {
           </div>
           <Grid container justifyContent="space-between">
             <Grid item xs={8}>
-              <CalcButton />
+              <CalcButton
+                score={props.score}
+                details={props.details}
+              />
               <CompareButton 
                 yourHomeValue={props.yourHomeValue}
                 avgHomeState={props.avgHomeState}
diff --git a/src/components/Results/IndividualScore/individualscore.jsx b/src/components/Results/IndividualScore/individualscore.jsx
index 544470d..d3c96f5 100644
--- a/src/components/Results/IndividualScore/individualscore.jsx
+++ b/src/components/Results/IndividualScore/individualscore.jsx
@@ -106,7 +106,9 @@ const IndividualScore = (props) => {
         </DialogTitle>
         <DialogContent>
           <hr style={{ color: 'lightgray' }} />
-          <Typography variant="h2"><IonIcon icon={documentText} style={{ marginRight: '10px' }}/> System Report Card</Typography>
+          <Typography variant="h2" marginTop={2}>
+            <IonIcon icon={documentText} style={{ marginRight: '10px' }}/> System Report Card
+          </Typography>
           <div style={{ display: 'flex', flexWrap: 'wrap' }}>
             {props.content.map((item, index) => (
               <Typography key={index} variant="body1" style={{ marginRight: '10px' }}>
@@ -114,8 +116,8 @@ const IndividualScore = (props) => {
               </Typography>
             ))}
           </div>
-          <Typography variant="h2" style={{margin: 10}}>
-            <IonIcon icon={bulb}/> Recommendations
+          <Typography variant="h2" marginTop={2}>
+            <IonIcon icon={bulb} style={{ marginRight: '10px' }}/> Recommendations
           </Typography>
           <TableContainer component={Paper}>
             <Table aria-label="Recommend table">
diff --git a/src/pages/Results.jsx b/src/pages/Results.jsx
index 82f244e..ec36e48 100644
--- a/src/pages/Results.jsx
+++ b/src/pages/Results.jsx
@@ -103,21 +103,39 @@ const Results = (props) => {
   ];
 
   // TEMPS
+  const score = 75;
   const co2Emission = '3,581 lbs';
   const yourHomeValue = 12010;
   const avgHomeState = 12503;
   const avgHomeUS = 16000;
+  const details = {
+    zipCode: 94110,
+    state: 'California',
+    solarIndex: 4.5,
+    heatingDegreeDays: 2000,
+    coolingDegreeDays: 300,
+    groundWaterTemp: 50,
+    homeVolume: 2000,
+    airChangesPerHour: 0.5,
+    wallRValue: 20,
+    atticRValue: 30,
+    glazingPercentage: 10,
+    heatLossBTUs: 1000,
+    solarHeatGainBTUs: 500
+  };
 
   return (
     <div className="results">
       <Header />
-      <Grid container spacing={4}>
+      <Grid container spacing={4} sx={{ width: '95vw', margin: 'auto' }}>
         <Grid item xs={12} md={4.5}>
           <EnergyScore 
+            score={score}
             co2Emission={co2Emission} 
             yourHomeValue={yourHomeValue}
             avgHomeState={avgHomeState}
             avgHomeUS={avgHomeUS}
+            details={details}
           />
         </Grid>
         <Grid item xs={12} md={7.5}>
diff --git a/src/styles/page.css b/src/styles/page.css
index a2c92a4..4f7140b 100644
--- a/src/styles/page.css
+++ b/src/styles/page.css
@@ -18,4 +18,4 @@
   color: red;
   font-size: 1.5rem;
   margin-top: 1rem;
-}
+}
\ No newline at end of file