import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';

import { USER_PROFILE_URL } from '../../config';
import UserActionCreators from '../../stores/user_action_creators';
import UserSelectors from '../../stores/user_selectors';
import ModalsActionCreators from '../../stores/modals_action_creators';

const mapStateToProps = (state) => ({
  isAuthenticated: UserSelectors.getIsAuthenticated(state),
  username: UserSelectors.getUsername(state),
  osmid: UserSelectors.getOsmId(state),
  avatar: UserSelectors.getAvatar(state),
});

const mapDispatchToProps = {
  login: UserActionCreators.login,
  fetchUserDetails: UserActionCreators.fetchUserDetails,
  openSettingsModal: ModalsActionCreators.openSettingsModal,
};

class Login extends Component {
  componentDidMount() {
    const { isAuthenticated, fetchUserDetails } = this.props;
    if (isAuthenticated) fetchUserDetails();
  }

  onLoginClick = () => {
    const { login, fetchUserDetails } = this.props;
    login().then(fetchUserDetails);
  }

  renderLoginState() {
    const { isAuthenticated, username, avatar, openSettingsModal } = this.props;
    const profileURL = `${USER_PROFILE_URL}/${username}`;

    if (isAuthenticated) {
      return (
        <div className='pad1x col12 truncate clearfix mobile-cols'>
          <div className='pad0y col6'>
            <a className='strong small dark' target='_blank' href={profileURL} title='Profile on OpenStreetMap'>
              <img className='dot avatar' src={avatar} role='presentation' />
              {username}
            </a>
          </div>
          <button onClick={openSettingsModal} className='col6 icon sprocket button quiet small animate'>Settings</button>
        </div>
      );
    }

    return (
      <div className='pad1x'>
        <button onClick={this.onLoginClick} className='icon osm button small col12 animate'>Authorize on OSM</button>
      </div>
    );
  }

  render() {
    const loginState = this.renderLoginState();

    return (
      <div className='space-bottom1'>
        <h4 className='dark block pad1x space-bottom1'>Account</h4>
        <div id='user-stuff' className='space-bottom1 col12 clearfix mobile-cols'>
          {loginState}
        </div>
      </div>
    );
  }
}

Login.propTypes = {
  isAuthenticated: PropTypes.bool.isRequired,
  username: PropTypes.string,
  osmid: PropTypes.string,
  avatar: PropTypes.string,
  login: PropTypes.func.isRequired,
  fetchUserDetails: PropTypes.func.isRequired,
  openSettingsModal: PropTypes.func.isRequired,
};

Login = connect(
  mapStateToProps,
  mapDispatchToProps
)(Login);

export default Login;

@@ -135,16 +135,57 @@
 onfig';%0A
+import %7B server %7D from '../../services';%0A
 import U
@@ -600,16 +600,56 @@
 state),%0A
+  token: UserSelectors.getToken(state),%0A
 %7D);%0A%0Acon
@@ -899,31 +899,21 @@
 const %7B 
-isAuthenticated
+token
 , fetchU
@@ -947,31 +947,21 @@
     if (
-isAuthenticated
+token
 ) fetchU
@@ -971,16 +971,25 @@
 Details(
+%7B token %7D
 );%0A  %7D%0A%0A
@@ -1034,77 +1034,914 @@
 ogin
-, fetchUserDetails %7D = this.props;%0A    login().then(fetchUserDetails)
+ %7D = this.props;%0A%0A    const popup = this.createPopup(600, 550, 'oauth_popup');%0A    popup.location = server.loginURL;%0A%0A    window.authComplete = (location) =%3E %7B%0A      const queryString = location.split('?')%5B1%5D;%0A      const creds = this.parseQueryString(queryString);%0A      login(creds);%0A%0A      delete window.authComplete;%0A    %7D%0A  %7D%0A%0A  createPopup(width, height, title) %7B%0A    const settings = %5B%0A      %5B'width', width%5D, %5B'height', height%5D,%0A      %5B'left', screen.width / 2 - width / 2%5D,%0A      %5B'top', screen.height / 2 - height / 2%5D%0A    %5D.map(x =%3E x.join('='))%0A     .join(',');%0A%0A    const popup = window.open('about:blank', title, settings);%0A    return popup;%0A  %7D%0A%0A  parseQueryString(queryString) %7B%0A    const query = %7B%7D;%0A%0A    queryString.split('&').forEach(pair =%3E %7B%0A      const %5Bkey, value%5D = pair.split('=');%0A      query%5BdecodeURIComponent(key)%5D = decodeURIComponent(value) %7C%7C null;%0A    %7D);%0A%0A    return query
 ;%0A  

create a popup to login url