import React, { Component, PropTypes } from 'react';
import { browserHistory } from 'react-router';
import bcrypt from 'bcryptjs';
import { connect } from 'react-redux';

import { signin, signup, signinWithGoogle, signWithFB } from '../../actions/login';
import ErrorHandler from '../../hoc/ErrorHandler';
import validator from '../../lib/validation/Validator';
import { Signin } from './Signin';
import { Signup } from './Signup';
import { SignupSuccess } from './SignupSuccess';
import { Logout } from './Logout';

import './styles.scss';

@ErrorHandler
class Login extends Component {

  constructor(props) {
    super(props);
    this.state = {
      isSignin: false,
      isSignup: false,
      isSigninShown: true,
      isSignupShown: false,
      isSuccessShown: false,
      signinEmail: '',
      signinPassword: '',
      signupEmail: '',
      signupUsername: '',
      signupPassword: '',
      signupPasswordConfirm: '',
    };
    this.initMethods();
  }

  initMethods() {
    this.switchToSignup = this.switchToSignup.bind(this);
    this.signin = this.signin.bind(this);
    this.signup = this.signup.bind(this);
    this.logout = this.logout.bind(this);
    this.onLoginFieldChange = this.onLoginFieldChange.bind(this);
    this.onGoogleSignin = this.onGoogleSignin.bind(this);
    this.signInCallback = this.signInCallback.bind(this);
    this.onFBSignin = this.onFBSignin.bind(this);
  }

  switchToSignup(e) {
    e.preventDefault();
    this.setState({ isSigninShown: false, isSignupShown: true });
  }

  onLoginFieldChange(e) {
    this.setState({ [e.target.name]: e.target.value });
  }

  hashPassword(value) {
    return bcrypt.hashSync(value, 7);
  }

  getToken() {
    return localStorage.getItem('token');
  }

  logout() {

  }

  signin() {
    const { signinEmail: email, signinPassword: pass } = this.state;
    const errors = validator.isSigninFormValid(email, pass, 6);
    if (!errors.length) {
      this.props.signin({ email, password: this.hashPassword(pass) });
      this.setState({ isSignin: true });
    }
  }

  signup() {
    const {
      signupEmail: email,
      signupUsername: username,
      signupPassword: pass,
      signupPasswordConfirm: passConfirm,
    } = this.state;
    const errors = validator.isSignupFormValid(email, username, pass, passConfirm, 6);
    if (!errors.length) {
      this.props.signup({ email, username, password: this.hashPassword(pass) });
      this.setState({ isSignup: true });
    }
  }

  onGoogleSignin() {
    window.auth2.grantOfflineAccess({ redirect_uri: 'postmessage' }).then(this.signInCallback);
  }

  signInCallback(authResult) {
    if (authResult.code) {
      this.props.signinWithGoogle(authResult);
    } else {
      console.log('error');
    }
  }

  onFBSignin() {
    let authData;
    window.FB.getLoginStatus((response) => {
      console.log('result 1', response);
      authData = response;
      if (response.status === 'connected') {
        this.props.signWithFB(authData.authResponse);
      }
      if (response.status !== 'connected') {
        window.FB.login((res) => {
          console.log('result 2', res);
          authData = res;
          this.props.signWithFB(authData.authResponse);
        });
      }
    });
  }

  componentWillReceiveProps(nextProps) {
    const { error } = nextProps.login;
    error && this.processError(error);
    if (!!this.getToken() && this.state.isSignin) {
      this.props.switchLogin();
      browserHistory.push('/lists');
    }
    if (!!this.getToken() && this.state.isSignup) {
      this.setState({ isSignup: false, isSignupShown: false, isSuccessShown: true });
      browserHistory.push('/lists');
    }
  }

  render() {
    return (
      <div className="login">
        { !this.getToken() && this.state.isSigninShown &&
          <Signin
            onSigninFieldChange={ this.onLoginFieldChange }
            onSignin={ this.signin }
            onSwitchToSignup={ this.switchToSignup }
            onGoogleSignin={ this.onGoogleSignin }
            onFBSignin={ this.onFBSignin }
          /> }
        { !this.getToken() && this.state.isSignupShown &&
          <Signup
            onSignupFieldChange={ this.onLoginFieldChange }
            onSignup={ this.signup }
          /> }
        { this.state.isSuccessShown && <SignupSuccess onSuccessClick={ this.props.switchLogin } /> }
        { this.getToken() && !this.state.isSuccessShown && <Logout onLogoutClick={ this.logout } /> }
      </div>
    );
  }
}

Login.propTypes = {
  signin: PropTypes.func.isRequired,
  signup: PropTypes.func.isRequired,
  switchLogin: PropTypes.func.isRequired,
  signinWithGoogle: PropTypes.func.isRequired,
  signWithFB: PropTypes.func.isRequired,
};

export default connect(
  state => ({ login: state.login }),
  { signin, signup, signinWithGoogle, signWithFB },
)(Login);