content: import React from 'react'
  import styles from './styles'
  import getMuiTheme from 'material-ui/styles/getMuiTheme'
  import Theme from '../../theme'
  import {FloatingActionButton, Snackbar} from 'material-ui'
  import ContentAdd from 'material-ui/svg-icons/content/add'
  
  import Sidenav from '../Sidenav'
  import Toolbar from '../Toolbar'
  import Calendar from '../Calendar'
  import BookingForm from '../BookingForm'
  
  class App extends React.Component {
  
    static propTypes = {
      node: React.PropTypes.object
    }
  
    state = {
      drawerOpen: false,
      formOpen: false,
      snackbarOpen: false,
      snackbarText: '',
      formRoomNumber: 0,
      checkinDate: null,
      checkoutDate: null,
      events: [
        {
        title: 'All Day Event',
        allDay: true,
        start: new Date(),
        end: new Date()
        },
        {
          title: 'All Day Event',
          allDay: true,
          start: new Date(),
          end: new Date()
        }
      ]
    }
  
    static childContextTypes = {
      muiTheme: React.PropTypes.object
    }
  
    getChildContext() {
      const themeOverrides = {
        toolbar: {
          height: 66,
          titleFontSize: 22
        }
      }
      return {
        muiTheme: getMuiTheme(Theme, themeOverrides)
      }
    }
  
    toggleDrawer = () => this.setState({drawerOpen: !this.state.drawerOpen})
    toggleForm = () => this.setState({formOpen: !this.state.formOpen})
    openSnackBar = () => this.setState({snackbarOpen: true})
    handleRoomChange = (e, i, formRoomNumber) => this.setState({formRoomNumber})
    handleCheckinChange = (e, checkinDate) => this.setState({checkinDate})
    handleCheckoutChange = (e, checkoutDate) => this.setState({checkoutDate})
  
    handleClose = () => {
      this.toggleForm()
      this.openSnackBar()
    }
  
    handleSubmitEvent = () => {
      let event = {
        title: 'All Day Event',
        allDay: true,
        start: this.state.checkinDate,
        end: this.state.checkoutDate
      }
      this.setState({events: [...this.state.events, event]})
      this.handleClose()
    }
  
    render() {
      return (
        <div style={styles.container}>
          <Toolbar leftButtonCallback={this.toggleDrawer}/>
          <Sidenav onRequestChange={this.toggleDrawer} open={this.state.drawerOpen}/>
          <Calendar events={this.state.events}/>
          <div style={{position: 'absolute', bottom: 20, right: 20}}>
            <FloatingActionButton onMouseUp={this.toggleForm} secondary={true}>
              <ContentAdd />
            </FloatingActionButton>
          </div>
          <BookingForm
            handleClose={this.handleClose}
            handleSubmit={this.handleSubmitEvent}
            handleRoomChange={this.handleRoomChange}
            handleCheckinChange={this.handleCheckinChange}
            handleCheckoutChange={this.handleCheckoutChange}
            open={this.state.formOpen}
            roomNumber={this.state.formRoomNumber}/>
            <Snackbar
              open={this.state.snackbarOpen}
              message="Event added to the Calendar"
              autoHideDuration={2000}
            />
        </div>
      )
    }
  }
  
  export default App
  