import CardMedia from "@material-ui/core/CardMedia";
import { makeStyles } from "@material-ui/core/styles";
import classNames from "classnames";
import Link from "next/link";
import React, { useEffect, useState } from "react";
import Card from "../components/Card/Card.js";
import CardBody from "../components/Card/CardBody.js";
import CardFooter from "../components/Card/CardFooter.js";
// @material-ui/icons
// core components
import { useAuth } from "../context/AuthContext";
import Button from "/components/CustomButtons/Button.js";
import Footer from "/components/Footer/Footer.js";
import GridContainer from "/components/Grid/GridContainer.js";
import GridItem from "/components/Grid/GridItem.js";
import Header from "/components/Header/Header.js";
import HeaderLinks from "/components/Header/HeaderLinks.js";
import Parallax from "/components/Parallax/Parallax.js";
// import { useRouter } from "next/dist/client/router";
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText";
import DialogTitle from "@material-ui/core/DialogTitle";
import Router from "next/router";
import styles from "/styles/jss/nextjs-material-kit/pages/components.js";
const useStyles = makeStyles(styles);
/**
* The `MainMenuPage` function is a React component that displays a main menu page with different
* options based on the user's authentication status and role.
* @param props - The `MainMenuPage` component is a functional component that serves as the main page
* for the application's menu. It receives props as input, and it uses various hooks and states to
* manage the component's behavior.
* @returns The `MainMenuPage` component is being returned. It consists of conditional rendering based
* on the authentication status and loading state. If the user is not authenticated or the page is
* still loading, a loading message is displayed. If the user is authenticated, the main content of the
* page is rendered, including a dialog for the user's first visit, a header component, a parallax
* image, and a grid
*/
export function MainMenuPage(props) {
const { isAdmin } = useAuth();
const { currentUser } = useAuth();
// const router = useRouter();
const classes = useStyles();
const { ...rest } = props;
const [loading, setLoading] = useState(true);
const [isFirstVisit, setIsFirstVisit] = useState(false); // New state for tracking first visit
console.log(isAdmin);
// Redirect if not logged in
useEffect(() => {
const checkAuth = async () => {
try {
if (currentUser === undefined) {
// User not logged in, redirect to login page
Router.push("/login");
} else {
setLoading(false);
// Check if user has visited before
const hasVisitedBefore = localStorage.getItem("hasVisitedBefore");
if (!hasVisitedBefore) {
setIsFirstVisit(true); // It's the user's first visit
localStorage.setItem("hasVisitedBefore", "true"); // Mark as visited
}
}
} catch (error) {
console.error("Error checking authentication:", error);
setLoading(false);
}
};
checkAuth();
}, [currentUser, Router]);
// Render nothing if not authenticated or still loading
if (currentUser === null || loading) {
console.log("Loading");
return <div></div>; // You can also render a loading spinner or message here
}
// Render the main content if authenticated
return (
<div>
<Dialog open={isFirstVisit} onClose={() => setIsFirstVisit(false)}>
<DialogTitle>Welcome!</DialogTitle>
<DialogContent>
<DialogContentText>
<p style={{ color: "black" }}>
This the first time you logged in. Please update your profile.
</p>
</DialogContentText>
</DialogContent>
<DialogActions>
<Link href="/profile">
<Button onClick={() => setIsFirstVisit(false)} color="primary">
OK
</Button>
</Link>
</DialogActions>
</Dialog>
<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}>
Welcome back {currentUser.displayName}
{/* {console.log(currentUser)} */}
</h1>
<h3 className={classes.subtitle}>Main Menu Page</h3>
</div>
</GridItem>
</GridContainer>
</div>
</Parallax>
<div
className={classNames(classes.main, classes.mainRaisededitted)}
padding="1%"
>
<GridContainer justify="left" spacing={4}>
<GridItem xs={12} sm={6} md={4} lg={4}>
<Link href="/routeplanner">
<a>
<Card>
<CardMedia
component="img"
alt="Image cannot be loaded"
height="250"
image="/img/mappic.jpg"
title="Picture of a map"
/>
<CardBody>
<h4
className={classes.cardTitle}
style={{ fontWeight: "bold" }}
>
Route Planning
</h4>
<p style={{ height: "3rem" }}>
View my current routes here
</p>
</CardBody>
<CardFooter></CardFooter>
</Card>
</a>
</Link>
</GridItem>
<GridItem xs={12} sm={6} md={4} lg={4}>
<Link href="/foodhealth">
<a>
<Card>
<CardMedia
component="img"
alt="Image cannot be loaded"
height="250"
image="/img/fudpic.jpg"
title="Picture of food"
/>
<CardBody>
<h4
className={classes.cardTitle}
style={{ fontWeight: "bold" }}
>
FoodHealth
</h4>
<p style={{ height: "3rem" }}>
Is the food I am going to consume healthy?
</p>
</CardBody>
<CardFooter></CardFooter>
</Card>
</a>
</Link>
</GridItem>
<GridItem xs={12} sm={6} md={4} lg={4}>
<Link href="/newfeedback">
<a>
<Card>
<CardMedia
component="img"
alt="Image cannot be loaded"
height="250"
image="/img/feedback.jpg"
title="Picture of feedback"
/>
<CardBody>
<h4
className={classes.cardTitle}
style={{ fontWeight: "bold" }}
>
New Feedback
</h4>
<p style={{ height: "3rem" }}>
Let us know if there are new points of interest that
aren't shown on our system!
</p>
</CardBody>
<CardFooter></CardFooter>
</Card>
</a>
</Link>
</GridItem>
{isAdmin && (
<GridItem xs={12} sm={6} md={4} lg={4}>
<Link href="/managesuggestion">
<a>
<Card>
<CardMedia
component="img"
alt="Image cannot be loaded"
height="250"
image="/img/suggestion.jpg"
title="Picture of suggestion"
/>
<CardBody>
<h4
className={classes.cardTitle}
style={{ fontWeight: "bold" }}
>
Manage Suggestions
</h4>
<p>
Let us know if there are new points of interest that
aren't shown on our system!
</p>
</CardBody>
<CardFooter></CardFooter>
</Card>
</a>
</Link>
</GridItem>
)}
</GridContainer>
</div>
<Footer />
</div>
);
}