import React from 'react';
import { Link } from 'react-router';

class User extends React . Component {
  /**
   * Render method
   */
  render() {
    let {
      id,
      active,
      roles,
      userInfo,
      email,
      userName,
      handleDelete,
      handleGenerate,
      handleActivate
    } = this.props;
    let userPath = `/dashboard/users/${id}`;
    let isAdmin = roles.find((r) => r === 'Admin');
    let recordClassname = isAdmin ? 'userRecord userAdmin' : 'userRecord';

    if(!active) {
      recordClassname = `${recordClassname} inactive`;
    }

    /**
     * Default action buttons
     */
    var buttons = (
      <div className="btn-group">
        {!isAdmin ? <a className="actieLink" onClick={handleDelete}>Deactiveer</a> : null}
        <a className="actieLink" onClick={handleGenerate}>Verstuur nieuw wachtwoord</a>
      </div>
    );

    /**
     * Action buttons for an inactive user
     */
    if(!active) {
      buttons = (
        <div className="btn-group">
          <a className="actieLink" onClick={handleActivate}>Activeer</a>
        </div>
      );
    }

    return (
      <div className={`borderedBlock ${recordClassname} userDetails`}>
        <h3 className="blockTitle fullName">
          <Link to={userPath} title={`User ID: ${id}; Profile ID: ${userInfo.id}`}>
          {userInfo.firstName} {userInfo.lastName}
          </Link>
        </h3>
        <table className="blockContent">
          <thead>
            <tr>
              <th>Gebruikersnaam</th>
              <th>Email</th>
              <th>Organisatie</th>
              <th>Acties</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td className="userName">{userName}</td>
              <td className="email">
                <a href={`mailto:${email}`}>{email}</a>
              </td>
              <td className="organisationCode">{userInfo.organisationCode}</td>
              <td className="btnCell">{buttons}</td>
            </tr>
          </tbody>
        </table>
      </div>
      );
  }
}

export default User;