/**
 * @flow
 */

import React from 'react';
import {
  MemoryRouter as Router,
  Match,
} from 'react-router';

import { css, StyleSheet } from 'aphrodite/no-important';

import { Provider } from 'react-redux';

import { getStore } from 'xde/state/store';
import type { AppStore } from 'xde/state/types';
import { actions } from 'xde/state';

import {
  MainScreen,
  AuthScreen,
} from 'xde/ui';

import {
  MatchWhenAuthorized,
} from 'xde/utils/routing';

type Props = {
  isAuthenticated?: boolean,
};

type State = {
  isLoaded: boolean,
}

/**
 * Main App container
 *
 * Looking for the old, monolithic App.js?? It's starting to be
 * broken up, but check out src/ui/MainScreen.js in the meantime.
 */
export default class RootApp extends React.Component {
  props: Props;
  state: State;

  _store: AppStore;

  constructor(props: Props) {
    super();
    this._store = getStore();
    this.state = {
      isLoaded: false,
    };
  }

  componentDidMount() {
    // TODO: We can handle a failure here, and show a nice message
    // when somebody doesn't have an internet connection
    this._store.dispatch(
      actions.auth.checkForExistingSession(),
    ).then(() => {
      this.setState({
        isLoaded: true,
      });
    });
  }

  render() {
    return (
      <div className={css(styles.container)}>
        <div className={css(styles.topBar)} />
        <Provider store={this._store}>
          <Router>
            {({ router }) => (
              this.state.isLoaded ?
                <div>
                  <Match pattern="/auth" component={AuthScreen} />
                  <MatchWhenAuthorized
                    exactly
                    pattern="/"
                    getRedirect={props => { // eslint-disable-line
                      if ((props.isAuthenticated && !props.isOnboarded) ||
                          (!props.isAuthenticated && props.needsPasswordMigration)) {
                        return '/auth/register';
                      }
                      return '/auth';
                    }}
                    component={MainScreen}
                  />
                </div> : <a id="app-loading" onClick={this._openDevTools}>Loading...</a>
            )}
          </Router>
        </Provider>
      </div>
    );
  }

  _openDevTools = () => {
    const { remote } = require('electron');
    remote.getCurrentWindow().openDevTools();
  }
}

const styles = StyleSheet.create({
  container: {
    display: 'flex',
    flex: 1,
    flexDirection: 'column',
  },
  topBar: {
    '-webkit-app-region': 'drag',
    height: 40,
    backgroundColor: 'transparent',
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
  },
});

@@ -1323,55 +1323,8 @@
 )%7D%3E%0A
-        %3Cdiv className=%7Bcss(styles.topBar)%7D /%3E%0A
     

Remove top bar underlay