import React, { Component } from 'react';
import '../css/events.css';
import MyCalendar from './MyCalendar.js';
import Event from './Event.js'

class Events extends Component {
  constructor(props) {
	super(props);
	var eves = [
		{ title: 'Summer School Sign Up ', date: '2019-08-27' , st:'14:30:00', et:'10:00:00', description: 'This would be the description. Blah BLah Blah. It is time to sign up for summer school.' },
		{ title: 'Pizza Day', date: '2019-08-28', st:'15:30:00', et:'09:00:00', description: 'This would be the description. Blah Blah Blah. Pizza is yummy.' }
	];
	this.state = {
	  date: new Date(),
	  events:eves
	}
  }
  onChange = date => this.setState({date})
  render() {
	var EList = this.state.events.map( (eve, i) =>
	  <Event eve={eve} key = {i}/>
	);
    return (
      <div id = 'content'>
        <h2> Events </h2>
        <p> Up comming events. </p>
        <ul id = 'eventslist'>
          {EList}
        </ul>
        <MyCalendar events = {this.state.events} />
      </div>
    );
  }
}

export default Events;