import React from 'react';
import firebase from 'firebase'
import { connect } from 'react-redux'
import { loginRequest, loginSuccess, loginError } from 'actions/auth'
import { Link } from 'react-router'
import { browserHistory } from 'react-router'


class SignupComponent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      email: '',
      password: '',
      firstname: '',
      lastname: ''
    }
  }
  onSubmit(e) {
    e.preventDefault()
    var { email, password, firstname, lastname } = this.state
    const { dispatch } = this.props
    email = email+"@sparkntnu.no"
    dispatch(loginRequest())
    firebase.auth().createUserWithEmailAndPassword(email, password)
      .then((user) => {
        return firebase.database().ref('users').child(user.uid).set({
          createdAt: firebase.database.ServerValue.TIMESTAMP,
          username: user.email.split('@')[0],
          firstname,
          lastname,
          about: 'Har ikke skrevet om meg enda.',
          position: 'Veileder',
          sparkMail: email,
          alternativeMail: 'n/a',
          phoneNumber: 'n/a',
          tags: [{value: "0", label: "Jeg er ubrukelig"}],
          startups: [],
          capacity: 0,
          status: [{value: "0", label: "Aktiv"}],
          profilePicUrl: "https://pbs.twimg.com/profile_images/706844157093027840/2Aan_aSU.jpg"
        }).then((payload) => {
          dispatch(loginSuccess(user.uid))
          browserHistory.push('/universe/dashboard')
        })
      }).catch((err) => {
        dispatch(loginError(err.message))
      })
  }



  render() {
    return (
      <div className="middle-box text-center loginscreen animated fadeInDown">
        <div>
            <h3>Registrering</h3>
            <p>Registrering kun for Spark* ansatte, du må benytte deg av din @sparkntnu.no epost.</p>
        </div>
        <form className="m-t" onSubmit={this.onSubmit.bind(this)}>
          <div className="form-group">
            <div className="input-group m-b">
              <input type='text'
                className="form-control"
                onChange={(e) => this.setState({email: e.target.value})}
                placeholder='Email'
                required
              />
            <span className="input-group-addon">@sparkntnu.no</span>
            </div>

          </div>
          <div className="form-group">
            <input type='text'
              className="form-control"
              onChange={(e) => this.setState({firstname: e.target.value})}
              placeholder='Fornavn'
              required
            />
          </div>
          <div className="form-group">
            <input type='text'
              className="form-control"
              onChange={(e) => this.setState({lastname: e.target.value})}
              placeholder='Etternavn'
              required
            />
          </div>
          <div className="form-group">
            <input type='password'
              className="form-control"
              onChange={(e) => this.setState({password: e.target.value})}
              placeholder='*******'
              required
            />
          </div>
          <button className="btn btn-primary block full-width m-b" type='submit' disabled={this.props.auth.loading}>Registrer deg</button>
          <p className="text-muted text-center"><small>Har du brukerkonto?</small></p>
          <Link className="btn btn-sm btn-white btn-block" to="/auth/login">Log inn</Link>
        </form>
      </div>
    );
  }
}

export default connect((state) => ({
  auth: state.auth
}))(SignupComponent)
