import React, { Component } from 'react';
import InputField from './forms/inputField.jsx';
import { connect } from 'react-redux';
import { reduxForm } from 'redux-form';
import { userDetails, saveUser, organisationList } from '../actions/userActions';
import { hasRole } from '../utils/helpers.jsx';

class UserDetails extends Component {
  /**
   *
   */
  componentWillMount() {
    let { dispatch } = this.props;
    let userId = this.props.params.userId;
    if(userId) {
      dispatch(userDetails(userId));
    }
    else {
      dispatch(userDetails());
    }

    dispatch(organisationList());
  }

  /**
   * Update formulier wanneer de props veranderen
   */
  componentDidUpdate(prevProps, prevState) {
    let { dispatch } = this.props;
    let userId = this.props.params.userId;
    if(prevProps.params.userId !== userId) {
      if(userId) {
        dispatch(userDetails(userId));
      }
      else {
        dispatch(userDetails());
      }

      dispatch(organisationList());
    }
  }

  /**
  * Change event
  */
  handleSubmit(data) {
    this.props.dispatch(saveUser(data));
  }

  /**
   *
   */
  render() {
    const {
      fields: {
        id,
        active,
        email,
        phoneNumber,
        firstName,
        lastName,
        organisationCode,
        clientIdList,
        roles
      },
      handleSubmit,
      userDetails,
      organisationList
    } = this.props;

    let error = userDetails.get('error');
    let errorParagraph = (error && error.text) ?
      <p>{`${error.text}${error.error ? ': ' + error.error : ''}`}</p> : null;

    let activeCheckbox = null;
    let userData = userDetails.get('data');
    if(userData && userData.roles && !hasRole('Admin', userData.roles)) {
      activeCheckbox = (<div className="form-group checkbox">
        <label>Actief</label>
        <input className="checkbox" type="checkbox" {...active} />
      </div>);
    }

    return (<div>
      <div className="portalMainForm">
        <div className="screenTitle">Gebruiker</div>
      </div>
      <div className="listContent">
        <p>
          Wijzigingen in gebruikersgegevens, worden pas actief nadat de
          betreffende gebruiker opnieuw is ingelogd.
        </p>

        {errorParagraph}

        <form onSubmit={handleSubmit(this.handleSubmit.bind(this))}>
          <div className="innerForm">
            <input value={id} type="hidden" />

            <InputField name="email" label="E-mailadres"
              readOnly={id.initialValue !== null} /* als bewerken => readonly! */
              type="email" required={true} {...email} />
            <InputField name="phoneNumber" label="Telefoonnummer"
              type="tel" pattern="[\+?]\d+" patternMessage="Formaat: +31612345678"
              required={true} {...phoneNumber} />
            <InputField name="firstName" label="Voornaam"
              required={true} {...firstName} pattern="[A-Za-z0-9\s]+" />
            <InputField name="lastName" label="Achternaam"
              required={true} {...lastName} pattern="[A-Za-z0-9\s]+" />

            <div className="form-group">
              <label>Organisatie code</label>
              <select {...organisationCode} className="form-control">
                {organisationList.map(o => <option key={o.orgCode} value={o.orgCode}>{o.orgName}</option>)}
              </select>
            </div>

            <InputField name="clientIdList" label="ClientID lijst"
              {...clientIdList} pattern="[0-9,;]+"
              patternMessage="Komma-gescheiden lijst van ClientID's (uit STARlight.NET)" />

            {activeCheckbox}

            <div className="form-group">
              <label>Rollen</label>
              <select multiple {...roles} className="form-control">
                {['User', 'Admin'].map(role => <option key={role}>{role}</option>)}
              </select>
            </div>

            <div className="form-group">
              <button type="submit">Wijzigingen opslaan</button>
            </div>
          </div>
        </form>
      </div>
    </div>);
  }
}

UserDetails.contextTypes = {
  router: React.PropTypes.object.isRequired
};

UserDetails = reduxForm({
  form: 'userDetails',
  fields: [
    'id',
    'active',
    'email',
    'phoneNumber',
    'firstName',
    'lastName',
    'organisationCode',
    'clientIdList',
    'roles'
  ]
},
(state) => { // mapStateToProps
  let getValue = (fieldName) => { // get property from userDetail object
    if(state.userDetails.get('data')) {
      let data = state.userDetails.get('data');
      if(data[fieldName]) {
        return data[fieldName];
      }
      else if(data.userInfo && data.userInfo[fieldName]) {
        return data.userInfo[fieldName];
      }
    }

    return null;
  };

  return {
    initialValues: {
      id: getValue('id'),
      active: getValue('active'),
      email: getValue('email'),
      phoneNumber: getValue('phoneNumber'),
      firstName: getValue('firstName'),
      lastName: getValue('lastName'),
      organisationCode: getValue('organisationCode'),
      clientIdList: getValue('clientIdList'),
      roles: getValue('roles')
    },
    userDetails: state.userDetails,
    organisationList: state.organisationList
  };
})(UserDetails);

export default UserDetails;