import React from 'react';
import Header from 'components/Header';
import Sidenav from 'components/Sidenav';
import Footer from 'components/Footer';
import Notifications from 'components/Notifications';
import Notification from 'components/Shared/Notification';
import GeolocationService from './Geolocation';

class MainApp extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      user: {
        useruuid: '',
        name: ''
      }
    }

    this.handleRide = this.handleRide.bind(this);
  }

  componentDidMount() {
    const user = JSON.parse(localStorage.getItem('loggedUser'));
    if (user) {
      this.setState(Object.assign(this.state, { user: user }));
    }
  }

  handleRide(ride) {
    if (this.props.onRideUpdate) {
      this.props.onRideUpdate(ride);
    }
  }

  render() {
    const { children, location } = this.props;

    return (
      <div className="main-app-container">
        <Sidenav />

        <section id="page-container" className="app-page-container">
          <Header />

          <div className="app-content-wrapper">
            <div className="app-content">
              <div className="full-height">
                {children}
              </div>
            </div>

            <Footer />
          </div>
        </section>
        <Notifications user={this.state.user} onRideUpdate={this.handleRide} />
        {/* <Notification user={this.state.user} onRideUpdate={this.handleRide} /> */}
      </div>
    );
  }
}

module.exports = MainApp;