import React, { Component } from 'react'
import Paper from 'material-ui/Paper';
import TextField from 'material-ui/TextField';
import RaisedButton from 'material-ui/RaisedButton'
import CircularProgress from 'material-ui/CircularProgress'
import { Link } from 'react-router'
import { connect } from 'react-redux'
import { userActions } from './../../actions/userActions'

import './LoginComponent.css'

class LoginComponent extends Component {
  constructor (props) {
    super(props)
    // bind the methods to this component
    this.changeUsername = this.changeUsername.bind(this)
    this.changePassword = this.changePassword.bind(this)
    this.handleSigninSubmit = this.handleSigninSubmit.bind(this)

    // set initial state
    this.state = {
      username: '',
      password: '',
      signup: false,
    }
  }

  changeUsername (e) {
    this.setState({ username: e.target.value })
  }

  changePassword (e) {
    this.setState({ password: e.target.value })
  }

  handleSigninSubmit (e) {
    e.preventDefault()
    // redux part. Calls the login method with parameters as username and password
    const { dispatch } = this.props;
    dispatch(userActions.login(this.state.username, this.state.password));
  }

  render () {
    return (
      <div style={{display: 'flex', alignItems: 'space-between'}}>
      <form onSubmit={this.handleSigninSubmit}>
        <h2 className="paperTitle">Sign In</h2>
          <div className="fieldsContainer">
            <TextField hintText="Email" value={this.state.username} onChange={this.changeUsername} required />
            <TextField type="password" hintText="Password" value={this.state.password} onChange={this.changePassword} required />

          <Link to="/auth/forgot" style={{fontSize: 12, float: 'right', textDecoration: 'underline'}}>Forgot Password?</Link> <br /><br />

            <RaisedButton className="submitButton" type="submit" label="Sign In" primary={true} disabled={this.props.logging} />

            <CircularProgress style={{position: 'absolute', padding: '27px 5px'}} size={20} hidden={!this.props.logging}/>
          </div>

              {this.props.error && <p>{this.props.error.message}</p>}

          <br /><br /><br />Don't have an account yet? <Link className="bottomAlign" to="/auth/signup">Signup here</Link>
      </form>
      </div>
    )
  }
}

// map redux global state to the props of this component
function mapStateToProps(state) {
  const { logging, user, error }  = state.authentication
  return {
    logging,
    user,
    error
  }
}

// connect this component to be able to access the global redux store
export default connect(mapStateToProps)(LoginComponent)