content: import React from 'react';
  import { Link } from 'react-router';
  
  import formatBirthDate from '../../modules/utilities/format-birth-date';
  import slugify from '../../modules/utilities/slugify';
  
  
  class PlayerPersonalDetailsComponent extends React.Component {
  
      constructor (props) {
          super(props);
  
          this.state = {
              player: {
                  birthDate: '',
                  club: '',
                  foot: '',
                  height: '',
                  name: '',
                  position: '',
                  squadNumber: ''
              }
          };
      }
  
      componentWillReceiveProps(nextProps) {
          this.setState({
              player: nextProps.player
          });
      }
  
      render() {
          let playerObject = this.state.player;
  
          const clubSlug = slugify(playerObject.club);
          const imageSlug = slugify(playerObject.name + '-' + playerObject.birthDate);
          const urlSlug = slugify(playerObject.name);
          const formattedBirthDate = formatBirthDate(playerObject.birthDate);
  
          let position = false;
          if (playerObject.position) {
              position = <div className="player-personal-details__meta">
                              <span className="player-personal-details__label">Position</span>
                              <span className="player-personal-details__value">{playerObject.position}</span>
                          </div>;
          }
  
          let squadNumber = false;
          if (playerObject.squadNumber) {
              squadNumber = <div className="player-personal-details__meta">
                              <span className="player-personal-details__label">Squad number</span>
                              <span className="player-personal-details__value">{playerObject.squadNumber}</span>
                          </div>;
          }
  
          let nationality = false;
          if (playerObject.nation) {
              nationality = <div className="player-personal-details__meta">
                              <span className="player-personal-details__label">Nationality</span>
                              <span className="player-personal-details__value">{playerObject.nation}</span>
                          </div>;
          }
  
          let dateOfBirth = false;
          if (formattedBirthDate) {
              dateOfBirth = <div className="player-personal-details__meta">
                              <span className="player-personal-details__label">Date of Birth</span>
                              <span className="player-personal-details__value">{formattedBirthDate}</span>
                          </div>;
          }
  
          let height = false;
          if (playerObject.height) {
              height = <div className="player-personal-details__meta">
                          <span className="player-personal-details__label">Height</span>
                          <span className="player-personal-details__value">{playerObject.height}cm</span>
                      </div>;
          }
  
          let foot = false;
          if (playerObject.foot) {
              foot =  <div className="player-personal-details__meta">
                          <span className="player-personal-details__label">Preferred foot</span>
                          <span className="player-personal-details__value">{playerObject.foot}</span>
                      </div>;
          }
  
          return (
              <div className={"player-personal-details player-personal-details--" + clubSlug}>
                  <h2 className="player-personal-details__title">Player profile</h2>
                  <div className="player-personal-details__meta">
                      <span className="player-personal-details__label">Club</span>
                      <span className="player-personal-details__value">
                          <Link className="player-personal-details__value-link" to={"/clubs/" + clubSlug} title={playerObject.club + " club profile"}>{playerObject.club}</Link>
                      </span>
                  </div>
                  {position}
                  {squadNumber}
                  {nationality}
                  {dateOfBirth}
                  {height}
                  {foot}
              </div>
          )
      }
  }
  
  PlayerPersonalDetailsComponent.defaultProps = {};
  PlayerPersonalDetailsComponent.displayName = 'PlayerPersonalDetailsComponent';
  PlayerPersonalDetailsComponent.propTypes = {};
  
  export default PlayerPersonalDetailsComponent;