import MobileDetect from 'mobile-detect';
import React, { Component, PropTypes } from 'react';
import BodyClassName from 'react-body-classname';
import Grid from 'react-bootstrap/lib/Grid';
import DocumentTitle from 'react-document-title';
import { connect } from 'react-redux';
import { createStructuredSelector } from 'reselect';

import { fetchUser } from 'actions/userActions';
import { enableGeoposition } from 'actions/uiActions';
import Favicon from 'shared/favicon';
import Footer from 'shared/footer';
import Header from 'shared/header';
import TestSiteMessage from 'shared/test-site-message';
import Notifications from 'shared/notifications';
import { getCustomizationClassName } from 'utils/customizationUtils';

const userIdSelector = state => state.auth.userId;

export const selector = createStructuredSelector({
  userId: userIdSelector,
});

export class UnconnectedAppContainer extends Component {
  constructor(props) {
    super(props);
    const mobileDetect = new MobileDetect(window.navigator.userAgent);
    if (mobileDetect.mobile()) {
      props.enableGeoposition();
    }
  }

  getChildContext() {
    return {
      location: this.props.location,
    };
  }

  componentDidMount() {
    if (this.props.userId) {
      this.props.fetchUser(this.props.userId);
    }
  }

  componentWillUpdate(nextProps) {
    if (nextProps.userId && nextProps.userId !== this.props.userId) {
      this.props.fetchUser(nextProps.userId);
    }
  }

  render() {
    return (
      <BodyClassName className={getCustomizationClassName()} >
        <DocumentTitle title="Varaamo">
          <div className="app">
            <Header location={this.props.location}>
              <Favicon />
              <TestSiteMessage />
            </Header>
            <div className="app-content">
              <Grid>
                <Notifications />
              </Grid>
              {this.props.children}
            </div>
            <Footer />
          </div>
        </DocumentTitle>
      </BodyClassName>
    );
  }
}

UnconnectedAppContainer.propTypes = {
  children: PropTypes.node,
  enableGeoposition: PropTypes.func.isRequired,
  fetchUser: PropTypes.func.isRequired,
  location: PropTypes.object.isRequired,
  userId: PropTypes.string,
};

UnconnectedAppContainer.childContextTypes = {
  location: React.PropTypes.object,
};

const actions = { enableGeoposition, fetchUser };

export default connect(selector, actions)(UnconnectedAppContainer);

@@ -324,16 +324,63 @@
 select';
+%0Aimport %7B withRouter %7D from 'react-router-dom';
 %0A%0Aimport
@@ -1330,24 +1330,63 @@
 rId);%0A    %7D%0A
+    this.removeFacebookAppendedHash();%0A
   %7D%0A%0A  compo
@@ -1540,16 +1540,213 @@
  %7D%0A  %7D%0A%0A
+  removeFacebookAppendedHash() %7B%0A    if (window.location.hash && window.location.hash.indexOf('_=_') !== -1) %7B%0A      this.props.history.replace(window.location.hash.replace('_=_', ''));%0A    %7D%0A  %7D%0A%0A
   render
@@ -1823,17 +1823,16 @@
 sName()%7D
- 
 %3E%0A      
@@ -2502,16 +2502,56 @@
 quired,%0A
+  history: PropTypes.object.isRequired,%0A
   userId
@@ -2730,16 +2730,30 @@
 ult 
+withRouter(%0A  
 connect(
 sele
@@ -2748,16 +2748,21 @@
 connect(
+%0A    
 selector
@@ -2762,24 +2762,28 @@
 elector,
+%0A   
  actions
 )(Unconn
@@ -2774,16 +2774,19 @@
  actions
+%0A  
 )(Unconn
@@ -2803,10 +2803,12 @@
 ntainer)
+%0A)
 ;%0A

Move removeFacebookAppendedHash to AppContainer's lifecycle