import React from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import Drawer from 'material-ui/Drawer';
import { List } from 'material-ui/List';
import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme';
import AppBar from 'material-ui/AppBar';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import injectTapEventPlugin from 'react-tap-event-plugin';
import { createStructuredSelector } from 'reselect';
import { connect } from 'react-redux';

import TreeList from '../TreeList/index'
import config from './config';
import { selectDrawerOpen, selectTreeStructure } from './selectors';
import { drawerToggle, drawerChange, changeActiveSubtree } from './actions';


// Needed for buttons to react on user tap
injectTapEventPlugin();

class AppPage extends React.Component {
  render() {
    return(
      <div>
        <AppBar
          title="Luminis"
          onLeftIconButtonTouchTap={this.props.onDrawerToggle}
        />
        <Drawer
          width={config.drawerWidth}
          open={this.props.drawerOpen}
          onRequestChange={this.props.onRequestDrawerChange}
        >
          <AppBar
            title="Luminis"
            showMenuIconButton={true}
            onLeftIconButtonTouchTap={this.props.onDrawerToggle}
          />
          <List>
            <TreeList/>
          </List>
        </Drawer>
        {this.props.children}
      </div>
    );
  }
}

const App = (props) => (
  <MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme)}>
    <AppPage {...props} />
  </MuiThemeProvider>
);

function mapDispatchToProps(dispatch) {
  return {
    onRequestDrawerChange: (drawerOpen) => dispatch(drawerChange(drawerOpen)),
    onDrawerToggle: () => dispatch(drawerToggle()),
    onTreeListNodeClick: (nodeId) => () => dispatch(changeActiveSubtree(nodeId)),
  };
}

const mapStateToProps = createStructuredSelector({
  tree: selectTreeStructure,
  drawerOpen: selectDrawerOpen,
});

// Wrap the component to inject dispatch and state into it
export default connect(mapStateToProps, mapDispatchToProps)(App);

@@ -492,16 +492,250 @@
 -redux';
+%0Aimport %7B push %7D from 'react-router-redux';%0Aimport NavigationBack from 'material-ui/svg-icons/navigation/arrow-back';%0Aimport NavigationMenu from 'material-ui/svg-icons/navigation/menu';%0Aimport IconButton from 'material-ui/IconButton';
 %0A%0Aimport
@@ -946,16 +946,64 @@
 tions';%0A
+import %7B MAP_URL %7D from '../MapPage/constants';%0A
 %0A%0A// Nee
@@ -1117,16 +1117,69 @@
 der() %7B%0A
+    const currentPath = this.props.location.pathname%0A
     retu
@@ -1276,33 +1276,287 @@
 ap=%7B
-this.props.onDrawerToggle
+%0A            currentPath !== MAP_URL ?%0A            this.props.onReturnToMap : this.props.onDrawerToggle%0A          %7D%0A          iconElementLeft=%7BcurrentPath !== MAP_URL ?%0A            %3CIconButton%3E%3CNavigationBack/%3E%3C/IconButton%3E : %3CIconButton%3E%3CNavigationMenu/%3E%3C/IconButton%3E%0A          
 %7D%0A  
@@ -1853,33 +1853,299 @@
 ap=%7B
-this.props.onDrawerToggle
+%0A              currentPath !== MAP_URL ?%0A              this.props.onReturnToMap : this.props.onDrawerToggle%0A            %7D%0A            iconElementLeft=%7BcurrentPath !== MAP_URL ?%0A              %3CIconButton%3E%3CNavigationBack/%3E%3C/IconButton%3E : %3CIconButton%3E%3CNavigationMenu/%3E%3C/IconButton%3E%0A            
 %7D%0A  
@@ -2690,16 +2690,66 @@
 deId)),%0A
+    onReturnToMap: () =%3E dispatch(push(MAP_URL)),%0A
   %7D;%0A%7D%0A%0A

Add back button on page different than MapPage