import React, { Component } from 'react';
import { connect } from 'react-redux';
import { umbracoPersonList } from '../actions/umbracoActions';
import { UMBRACO_SERVER } from '../constants/appConstants';
import trim from 'trim';

class ContactPerson extends Component {
  /**
   *
   */
  componentWillMount() {
    let { dispatch, email } = this.props;
    dispatch(umbracoPersonList(email));
  }

  /**
   * Update contactPerson
   */
  componentDidUpdate(prevProps, prevState) {
    let { dispatch, email } = this.props;
    if(prevProps.email !== email) {
      dispatch(umbracoPersonList(email));
    }
  }

  /**
   *
   */
  render() {
    let {
      email,
      name,
      umbracoPersonList
    } = this.props;

    let person = (<div>
      <p>Uw accountmanager is <a href={`mailto:${trim(email)}`}>{trim(name)}</a>.</p>
    </div>);

    if(umbracoPersonList.size > 0) {
      let p = umbracoPersonList.get(0);
      let image = `${p.fields.foto.fields.umbracoFile.src}?mode=crop&width=120&heightratio=1&slimmage=true`;
      person = (<div className="contactPerson">
        <h2 className="fullName">{p.fields.voornaam} {p.fields.achternaam}</h2>
        <div className="personField imageWrapper">
          <img className="image" src={`${UMBRACO_SERVER}${image}`} />
        </div>
        <div className="personField functie">{p.fields.functie}</div>
        <div className="personField telefoonnummer">
          <span className="iconWrapper" dangerouslySetInnerHTML={{__html: window.icon_telefoon_contact}} />
          {p.fields.telefoonnummer}
        </div>
        <div className="personField emailadres">
          <span className="iconWrapper" dangerouslySetInnerHTML={{__html: window.icon_mail_contact}} />
          <a href={`mailto:${p.fields.emailadres}`}>
            {p.fields.emailadres}
          </a>
        </div>
      </div>);
    }

    return (
      <div>{person}</div>
    );
  }
}

const mapStateToProps = (state, ownProps) => {
  return {
    umbracoPersonList: state.umbracoPersonList
  };
};

ContactPerson.propTypes = {
  email: React.PropTypes.string.isRequired,
  name: React.PropTypes.string.isRequired,
};

export default connect(mapStateToProps)(ContactPerson);