import { useEffect, useState } from "react";
import { useRouter } from "next/router";
import { getDatabase, ref, get } from "firebase/database";
import classNames from "classnames";
import Header from "/components/Header/Header.js";
import HeaderLinks from "/components/Header/HeaderLinks.js";
import Parallax from "/components/Parallax/Parallax.js";
import GridContainer from "/components/Grid/GridContainer.js";
import GridItem from "/components/Grid/GridItem.js";
import Button from "/components/CustomButtons/Button.js";
import KeyboardBackspace from "@material-ui/icons/KeyboardBackspace";
import Card from "/components/Card/Card.js";
import CardBody from "/components/Card/CardBody.js";
import CardHeader from "/components/Card/CardHeader.js";
import { makeStyles } from "@material-ui/core/styles";
import styles from "/styles/jss/nextjs-material-kit/pages/components.js";
const useStyles = makeStyles(styles);
/** The line `export const database = getDatabase();` is exporting a constant named `database` that is
assigned the result of calling the `getDatabase()` function. In this context, `getDatabase()` is
likely a function provided by Firebase SDK that initializes and returns a reference to the Firebase
Realtime Database. */
export const database = getDatabase();
/**
* Represents the router instance provided by Next.js for handling routing.
* @type {Object}
*/
export const router = useRouter();
/**
* Represents the id parameter extracted from the router query object.
* @type {string | undefined}
*/
export const { id } = router.query;
/**
* Represents the state variable for storing information about the food.
* @type {[any, function]}
*/
export const [foodInfo, setFoodInfo] = useState(null);
/**
* Represents the state variable for storing the name of the food.
* @type {[string, function]}
*/
export const [foodName, setFoodName] = useState("");
/**
* Represents the CSS classes generated using the useStyles hook.
* @type {Object}
*/
export const classes = useStyles();
/**
* Represents the rest of the props passed to the component.
* @type {Object}
*/
export const { ...rest } = props;
/**
* The `FoodInfo` function in JavaScript fetches and displays nutritional information about a food item
* based on the provided id parameter.
* @param props - - `props`: An object containing the properties passed to the `FoodInfo` component.
* These properties can include any data or functions that are passed down from a parent component to
* `FoodInfo`. In the provided code snippet, the `props` object is destructured to extract any
* additional props that are
* @returns The `FoodInfo` component is returning a JSX structure that includes a header, a parallax
* image, and nutritional information about a specific food item. The returned JSX structure consists
* of various components like `Header`, `Parallax`, `GridContainer`, `GridItem`, `Card`, `CardHeader`,
* `CardBody`, and more.
*/
export function FoodInfo(props) {
const router = useRouter();
const { id } = router.query;
const [foodInfo, setFoodInfo] = useState(null);
const [foodName, setFoodName] = useState("");
const classes = useStyles();
const { ...rest } = props;
useEffect(() => {
if (id) {
const foodRef = ref(database, "food");
get(foodRef)
.then((snapshot) => {
if (snapshot.exists()) {
const foodData = snapshot.val();
const foodItem = Object.values(foodData).find(
(item) => item.id === parseInt(id)
);
if (foodItem) {
setFoodInfo(foodItem);
setFoodName(
Object.keys(foodData).find(
(key) => foodData[key].id === parseInt(id)
)
);
} else {
console.log("Food not found");
}
} else {
console.log("Food not found");
}
})
.catch((error) => {
console.error("Error retrieving food information:", error);
});
}
}, [id]);
/* This code snippet is a conditional check that is used to handle the scenario where the `foodInfo`
state variable is null or undefined. */
if (!foodInfo) {
return <div>Loading...</div>;
}
return (
<div>
<Header
brand="ThisIsNotFair"
rightLinks={<HeaderLinks />}
fixed
brandlink="/mainmenu"
color="transparent"
changeColorOnScroll={{ height: 400, color: "white" }}
{...rest}
/>
<Parallax image="/img/bg7.jpg">
<div className={classes.container}>
<GridContainer>
<GridItem>
<div className={classes.brand}>
<h1 className={classes.title}>Food Health</h1>
<h3 className={classes.subtitle}>
Nutritional Guide and Analysis
</h3>
</div>
</GridItem>
</GridContainer>
</div>
</Parallax>
<div className={classNames(classes.main, classes.mainRaised)}>
<GridContainer justify="center" spacing={4}>
<GridItem xs={12} sm={8} md={8}>
<Card style={{ backgroundColor: "#fffde7" }}>
<CardHeader
className={classes.cardHeader}
style={{ position: "relative", paddingTop: "40px" }}
>
<Button
justIcon
round
color="primary"
onClick={handleBackButtonClick}
style={{ position: "absolute" }}
>
<KeyboardBackspace className={classes.icons} />
</Button>
<div style={{ textAlign: "center", marginTop: "20px" }}>
<h2>{foodName} Nutritional Information</h2>
<h3>{foodInfo.category}</h3>
</div>
</CardHeader>
<CardBody className={classes.cardBody}>
<div className={classes.cardContainer}>
<img
src={foodImage}
alt="Food"
className={classes.foodImage}
style={{
width: "100%",
height: "auto",
maxHeight: "calc(100vh - 240px)",
borderRadius: "50px",
}}
/>
<div style={{ display: "flex", flexDirection: "row" }}>
<Card
style={{
flex: 1,
marginRight: 10,
backgroundColor: "#fff9c4",
}}
>
<CardHeader className={classes.cardHeader}>
<h3>100g Serving</h3>
</CardHeader>
<CardBody className={classes.cardBody}>
<p>Calories: {foodInfo.calories}</p>
<p>Fats: {foodInfo.fats}</p>
<p>Carbs: {foodInfo.carbs}</p>
<p>Protein: {foodInfo.protein}</p>
</CardBody>
</Card>
<Card
style={{
flex: 1,
marginLeft: 10,
backgroundColor: "#fff9c4",
}}
>
<CardHeader className={classes.cardHeader}>
<h3>One Serving</h3>
</CardHeader>
<CardBody className={classes.cardBody}>
<p>Calories: {foodInfo.scalories}</p>
<p>Fats: {foodInfo.sfats}</p>
<p>Carbs: {foodInfo.scarbs}</p>
<p>Protein: {foodInfo.sprotein}</p>
</CardBody>
</Card>
</div>
</div>
</CardBody>
</Card>
</GridItem>
</GridContainer>
</div>
</div>
);
}
/**
* The function `handleBackButtonClick` is used to navigate back in the router history.
*/
export const handleBackButtonClick = () => {
router.back();
};