import { Trans } from 'react-i18next';

import * as R from 'ramda';

  constructor(props) {

    super(props);

    this.state = {

      username: '',

      email: '',

      password1: '',

      password2: ''

    }

  }

    const {

      username,

      email,

      password1,

      password2 } = this.state;

  handleChange = (event) => {

    const newState = {};

    newState[event.target.name] = event.target.value;

    this.setState(newState);

  }

    if (errorMessages && fieldname in errorMessages) {

      return errorMessages[fieldname].map((message, key) =>

        <p key={ key } className="form-text alert alert-danger mt-4" role="alert" >{ message }</p>

  renderNonFieldErrors(errorMessages) {

    if (errorMessages && errorMessages.error) {

      return (

        <div className="alert alert-danger mt-4" role="alert">

          <Trans i18nKey="login.login_error">Unable to log in.</Trans>

        </div>

      )

    }

    const errors = R.reduce(

      (acc, p) => R.concat(acc, R.ifElse(Array.isArray, R.identity, v => [v,])(R.pathOr([], ['data', p], errorMessages))),

      [],

      ['non_field_errors', 'detail']

    );

    if (errors && errors.length > 0 ) {

      return (

        <div className="alert alert-danger mt-4" role="alert">

        { errors.map((message, key) =>

          <p key={ key }><Trans i18nKey="register.register_error">{ message }</Trans></p>

        ) }

        </div>

      )

    }

  }

    const errorMessages = this.props.register.error ? this.props.register.errorMessages : false ;

                    <div className="form-group mb-2 ml-3 w-75">

                      <label className="col-form-label text-primary font-weight-bold mt-2" htmlFor="username"><Trans i18nKey="common.username">Nom d'utilisateur</Trans></label>

                      <input className="form-control bg-irinotes-form border-0 text-muted" type="text" onChange={this.handleChange} value={this.state.username} name="username" />

                      { errorMessages && this.renderErrorMessage(errorMessages.data, 'username') }

                    <div className="form-group mb-2 ml-3 w-75">

                      <label className="col-form-label text-primary font-weight-bold mt-2" htmlFor="email"><Trans i18nKey="common.email">Email</Trans></label>

                      <input className="form-control bg-irinotes-form border-0 text-muted" type="email" onChange={this.handleChange} value={this.state.email} name="email" />

                      { errorMessages && this.renderErrorMessage(errorMessages.data, 'email') }

                    <div className="form-group mb-2 ml-3 w-75">

                      <label className="col-form-label text-primary font-weight-bold mt-2" htmlFor="password1"><Trans i18nKey="common.password">Mot de passe</Trans></label>

                      <input className="form-control bg-irinotes-form border-0 text-muted" type="password" onChange={this.handleChange} value={this.state.password1} name="password1" />

                      { errorMessages && this.renderErrorMessage(errorMessages.data, 'password1') }

                    <div className="form-group mb-2 ml-3 w-75">

                      <label className="col-form-label text-primary font-weight-bold mt-2" htmlFor="password2"><Trans i18nKey="register.password_confirmation">Confirmer le mot de passe</Trans></label>

                      <input className="form-control bg-irinotes-form border-0 text-muted" type="password" onChange={this.handleChange} value={this.state.password2} name="password2" />

                      { errorMessages && this.renderErrorMessage(errorMessages.data, 'password2') }

                    { this.renderNonFieldErrors(errorMessages) }

                    <button type="submit" onClick={this.submit} className="btn btn-primary btn-lg text-secondary font-weight-bold mt-3"><Trans i18nKey="register.register">S'inscrire</Trans></button>

                <a className="text-muted" href="/login" onClick={ this.onClickLogin }><Trans i18nKey="register.already_registered">Déjà inscrit ? Se connecter</Trans>.</a>