import React from 'react';
import PropTypes from 'prop-types';
import { Link, Redirect } from 'react-router-dom';
import { Helmet } from 'react-helmet';
import { FormattedMessage } from 'react-intl';
import { connect } from 'react-redux';
import { compose } from 'redux';
import { createStructuredSelector } from 'reselect';

import { storeToken } from '../User/lib';

import injectReducer from 'utils/injectReducer';
import injectSaga from 'utils/injectSaga';

import Container from './Container';
import H2 from 'components/H2';
import Section from './Section';
import messages from './messages';
import reducer from './reducer';
import saga from './saga';
import LoginWrapper from './LoginWrapper';
import FacebookDiv from './FacebookDiv';
import GoogleDiv from './GoogleDiv';
import FontAwesome from 'react-fontawesome';

import FacebookLoginButton from 'react-social-login-buttons/lib/buttons/FacebookLoginButton';
import GoogleLoginButton from 'react-social-login-buttons/lib/buttons/GoogleLoginButton';

import {
  FormGroup,
  FormControl,
  ControlLabel,
  HelpBlock,
} from 'react-bootstrap';

import LoginDiv from './LoginDiv';
import LoadingButton from 'components/LoadingButton';

import {
  getToken,
  changeUsername,
  changePassword,
  changeIsLoading,
  changeError,
  changeLoginType,
} from './actions';

import {
  makeSelectUsername,
  makeSelectPassword,
  makeSelectIsLoading,
  makeSelectLoginType,
} from './selectors';

export class LoginPage extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
  validateForm() {
    return this.props.login_username.length > 0
      && this.props.login_password.length > 0;
  }

  render() {
    return (
      <LoginWrapper>
        <Helmet
          title="Login"
          meta={[
            { name: 'description', content: 'Koala Call | Login' },
          ]}
        />
        <LoginDiv onSubmit={this.props.onChangeLoginType, this.props.onSubmitLogin}>
          <Section>
            <H2>
              <FormattedMessage {...messages.loginpage} />
            </H2>
          </Section>
          <FormGroup controlId="username" bsSize="large">
            <ControlLabel>Email</ControlLabel>
            <FormControl
              autoFocus
              type="username"
              autoComplete="username"
              placeholder="your sign in email"
              value={this.props.login_username}
              onChange={this.props.onChangeUsername} />
          </FormGroup>
          <FormGroup controlId="password" bsSize="large">
            <ControlLabel>Password</ControlLabel>
            <FormControl
              autoComplete="current-password"
              value={this.props.login_password}
              placeholder="*************************"
              onChange={this.props.onChangePassword}
              type="password" />
              <HelpBlock>Make sure you don't have CAPSLOCK on.</HelpBlock>
          </FormGroup>
          <LoadingButton
            block
            bsSize="large"
            disabled={!this.validateForm()}
            type="submit"
            isLoading={this.props.login_isLoading}
            text="LOGIN"
            loadingText="Logging in…" />
          <div style={{padding: '8px'}}>Not a user? <Link to="/signup">Signup</Link></div>
        </LoginDiv>
        <FacebookDiv>
          <FacebookLoginButton text="LOGIN WITH FACEBOOK" onClick={() => this.props.onChangeLoginType('Facebook'), this.props.onSubmitLogin} />
        </FacebookDiv>
        <GoogleDiv>
          <GoogleLoginButton text="LOGIN WITH GOOGLE" onClick={() => this.props.onChangeLoginType('Google'), this.props.onSubmitLogin} />
        </GoogleDiv>
      </LoginWrapper>
    );
  }
}

LoginPage.propTypes = {
  login_error: React.PropTypes.oneOfType([
    React.PropTypes.object,
    React.PropTypes.bool,
  ]),
  login_username: React.PropTypes.string,
  login_password: React.PropTypes.string,
  login_isLoading: React.PropTypes.bool,
  login_type: React.PropTypes.string,
  onChangeUsername: React.PropTypes.func,
  onChangePassword: React.PropTypes.func,
  onChangeIsLoading: React.PropTypes.func,
  onChangeLoginType: React.PropTypes.func,
  onChangeError: React.PropTypes.func,
};

export function mapDispatchToProps(dispatch) {
  return {
    onChangeUsername: (evt) => dispatch(changeUsername(evt.target.value)),
    onChangePassword: (evt) => dispatch(changePassword(evt.target.value)),
    onChangeIsLoading: (evt) => dispatch(changeIsLoading(evt.target.value)),
    onChangeError: (evt) => dispatch(changeError(evt.target.value)),
    onChangeLoginType: (evt) => dispatch(changeLoginType(evt)),
    onSubmitLogin: (evt) => {
      if (evt !== undefined && evt.preventDefault) evt.preventDefault();
      dispatch(getToken());
    },
  };
}

const mapStateToProps = createStructuredSelector({
  login_username: makeSelectUsername(),
  login_password: makeSelectPassword(),
  login_isLoading: makeSelectIsLoading(),
  login_type: makeSelectLoginType()
});

const withConnect = connect(mapStateToProps, mapDispatchToProps);
const withReducer = injectReducer({ key: 'login', reducer });
const withSaga = injectSaga({ key: 'login', saga });

// Wrap the component to inject dispatch and state into it
export default compose(
  withReducer,
  withSaga,
  withConnect,
)(LoginPage);