text: import { graphql, useStaticQuery } from 'gatsby';
  import React from 'react';
  import PropTypes from 'prop-types';
  import Box from '@material-ui/core/Box';
  import Container from '@material-ui/core/Container';
  import Typography from '@material-ui/core/Typography';
  import EventIcon from '@material-ui/icons/Event';
  import EventAvailableIcon from '@material-ui/icons/EventAvailableTwoTone';
  import { withStyles } from '@material-ui/core';
  
  import EventGrid from '../EventGrid/EventGrid';
  import AnchorTarget from '../AnchorTarget/AnchorTarget';
  import EmptyEventMessage from '../EmptyEventMessage/EmptyEventMessage';
  import EventHighLight from '../EventHighlight/EventHighlight';
  import PageTitle from '../PageTitle/PageTitle';
  
  const eventsIntro = `
  	Hack offers workshops that focus on practical application, such as web
  	development and mobile development. We also host fun one-time activities such
  	as UCLA's biggest beginner-friendly Hackathon, Hack on the Hill. Regardless of
  	background or experience, you can find an event that is just for you.
  `;
  
  const styles = theme => ({
  	container: {
  		marginTop: theme.spacing(4),
  		marginBottom: theme.spacing(4)
  	},
  	intro: {
  		fontFamily: theme.typography.body1.fontFamily,
  		fontSize: theme.typography.fontSize * 1.3,
  		lineHeight: 1.76,
  		[theme.breakpoints.down('xs')]: {
  			fontSize: theme.typography.fontSize,
  			lineHeight: 1.57
  		}
  	},
  	eventIcon: {
  		fontSize: 'inherit'
  	},
  	dividerDiv: {
  		padding: theme.spacing(10, 0)
  	},
  	headline: {
  		margin: theme.spacing(6, 0),
  		// to align inline Icon with text
  		display: 'flex',
  		justifyContent: 'center',
  		alignItems: 'flex-end'
  	}
  });
  
  function EventPage({ classes }) {
  	const data = useStaticQuery(graphql`
  		{
  			upcomingEvents: allHackEvent(sort: {fields: date}, filter: {past: {eq: false}}) {
  				nodes {
  					...HackEventForEventGrid
  				}
  			}
  			pastEvents: allHackEvent(sort: {fields: date, order: DESC}, filter: {past: {eq: true}}) {
  				nodes {
  					...HackEventForEventGrid
  				}
  			}
  		}
  	`);
  
  	const pastEvents = data.pastEvents.nodes;
  	const upcomingEvents = data.upcomingEvents.nodes;
  
  	const upcomingEventsElement = upcomingEvents.length === 0 ?
  		<EmptyEventMessage /> :
  		<EventGrid events={upcomingEvents} />;
  
  	const pastEventsElement = pastEvents.length === 0 ?
  		null :
  		<EventGrid events={pastEvents} />;
  
  	return <>
  		{/* Textual Introduction and Event Highlight */}
  		<Container maxWidth="md" className={classes.container} component="article">
  			<PageTitle className={classes.headline}>
  				HackEvents
  				<Typography display="inline" variant="h3" component="span" color="primary">™</Typography>
  			</PageTitle>
  			<Typography classes={{ root: classes.intro }}>
  				{eventsIntro}
  			</Typography>
  			<EventHighLight />
  		</Container>
  
  		<header className={classes.dividerDiv}>
  			<Typography variant="h3" align="center" gutterBottom>
  				{`Can't wait to`}
  				<Box color="primary.main" component="span">
  					{` hack `}
  				</Box>
  				{`with us?`}
  			</Typography>
  			<Typography variant="h5" align="center" component="p">
  				See our event schedule 📅
  			</Typography>
  		</header>
  
  		<Container maxWidth="md" component="article" fixed>
  			<AnchorTarget anchorId="upcoming" />
  
  			{/* Upcoming events */}
  			<section>
  				<Typography variant="h3" className={classes.headline} color="textPrimary">
  					<EventAvailableIcon color="primary" className={classes.eventIcon} /> Upcoming
  				</Typography>
  				{upcomingEventsElement}
  			</section>
  
  			{/* Past events */}
  			{pastEvents.length === 0 ?
  				null :
  				<section>
  					<Typography variant="h4" className={classes.headline}>
  						<EventIcon fontSize="large" /> Past
  					</Typography>
  					{pastEventsElement}
  				</section>
  			}
  		</Container>
  	</>;
  }
  
  EventPage.propTypes = {
  	classes: PropTypes.object.isRequired
  };
  
  export default withStyles(styles)(EventPage);
  