import React, {Component, PropTypes} from 'react';
import Modal from 'react-bootstrap/lib/Modal';
import {reduxForm} from 'redux-form';
import signupValidation from './signupValidation';
import * as api from 'redux/modules/api';
import {connect} from 'react-redux';

@connect(
  state => {
    let props = {};

    switch (api.getStatus(api.SIGNUP_CALL, state.api)) {
        case api.SUCCESS:
            props.success = true;
        break;

        case api.ERROR:
            props.apiError = api.getErrorMessage(api.SIGNUP_CALL, state.api);
        break;
    }

    //

    return props;
  },
  {
      signup: api.signup
  })
@reduxForm({
  form: 'signup',
  fields: ['username', 'email', 'password', 'confirm'],
  validate: signupValidation,
  asyncValidate,
  asyncBlurFields: ['email']
})

export default class ModalSignup extends Component {
  static propTypes = {
    show: PropTypes.bool.isRequired,
    onHide: PropTypes.func.isRequired,
    active: PropTypes.string,
    asyncValidating: PropTypes.bool.isRequired,
    fields: PropTypes.object.isRequired,
    dirty: PropTypes.bool.isRequired,
    handleSubmit: PropTypes.func.isRequired,
    invalid: PropTypes.bool.isRequired,
    pristine: PropTypes.bool.isRequired,
    valid: PropTypes.bool.isRequired,
    success: PropTypes.bool,
    apiError: PropTypes.string
  }

  state = {
    showModal: true,
    appstate: this.props.appstate
  }

  componentWillReceiveProps(nextProps) {
        if (nextProps.success) {
        this.setState({success: true});
    } else if (nextProps.apiError) {
        this.setState({errorText: nextProps.apiError});
    }
  }

  componentDidMount() {}

  handleSubmit = (event) => {
    event.preventDefault();
    const email = this.props.values.email;
    const username = this.props.values.username;
    const password = this.props.values.password;

    this.props.signup(username, email, password);
  }

  onHide = () => {
      this.setState({success: false});
      this.setState({errorText: null});
      this.state.appstate.setState({showSignup: false});
  }

  render() {
    const {
      asyncValidating,
      fields: {username, email, password, confirm},
      handleSubmit
      } = this.props;

    const renderInput = (field, label, placeholder, showAsyncValidating) =>
      <div className={'form-group col-xs-12' + (field.error && field.touched ? ' has-error' : '')}>
        <label htmlFor={field.name} className="control-label">{label}</label>
          {showAsyncValidating && asyncValidating && <i className={'fa fa-cog fa-spin '}/>}
          <input type={(field.name === 'password' || field.name === 'confirm') ? 'password' : 'text'}
            className="form-control" placeholder={placeholder} id={field.name} {...field}/>
          {field.error && field.touched && <div className="text-danger">{field.error}</div>}
      </div>;

    const renderText = (text) =>
        <p className="text-center message-container">{text}</p>;

    const renderError = (err) =>
        <p className="text-center message-container error">{error}</p>;

    return (
      <Modal show={this.props.show} onHide={this.props.onHide} id="signupModal" aria-labelledby="signupModalLabel" className="signup-modal">
          <Modal.Header closeButton>
            <Modal.Title>SignUp</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <div className="row">
                {this.state.success && renderText("You have successfuly signed up. \
                    You'll see a message asking you to verify your account.")}

                {this.state.errorText && renderError(this.state.errorText)}

                {!(this.state.success || this.state.errorText) && (
                    <form id="signupForm" method="post" onSubmit={this.handleSubmit}>
                        {renderInput(email, 'Email*', 'Your Email', true)}
                        {renderInput(username, 'Username*', 'Your Username')}
                        {renderInput(password, 'Password*', 'From 6 to 12 characters')}
                        {renderInput(confirm, 'Repeat Password*', 'Confirm')}
                        <div className="form-group col-xs-12">
                            <button type="submit" className="btn btn-warning btn-lg col-xs-12" onClick={this.handleSubmit}>
                                Signup
                            </button>
                        </div>
                    </form>)}
            </div>
          </Modal.Body>
        </Modal>
    );
  }
}