import React, { Component } from 'react';
import _ from 'lodash';
import { Link } from 'react-router-dom';
import { values } from '../values.config';

class ActivityText extends Component {
  render() {
    const { data, classes, clickableClasses, highlightedClasses } = this.props;

    switch (data.Type) {
      case values.activityMaintenanceJobStatusChanged:
        return (
          <p className={classes}>
            <span className={highlightedClasses}>{data.User.displayName}</span>
            &nbsp;{values.textChangedRequestStatus}&nbsp;
            <Link to={`${values.routeRequestDetails}/${data.Id}`} className={clickableClasses}>
              {_.truncate(data.Data.title || data.Data.description, { length: 30, separator: '...' })}
            </Link>
          </p>
        );
      case values.activityAddMaintenanceJob:
        return (
          <p className={classes}>
            <span className={highlightedClasses}>{data.User.displayName}</span>
            &nbsp;{values.textAddedRequest}&nbsp;
            <Link to={`${values.routeRequestDetails}/${data.Id}`} className={clickableClasses}>
              {_.truncate(data.Data.title || data.Data.description, { length: 30, separator: '...' })}
            </Link>
          </p>
        );
      case values.activityEditMaintenanceJob:
        return (
          <p className={classes}>
            <span className={highlightedClasses}>{data.User.displayName}</span>
            &nbsp;{values.textEditedRequest}&nbsp;
            <Link to={`${values.routeRequestDetails}/${data.Id}`} className={clickableClasses}>
              {_.truncate(data.Data.title || data.Data.description, { length: 30, separator: '...' })}
            </Link>
          </p>
        );
      case values.activityDeleteMaintenanceJob:
        return (
          <p className={classes}>
            <span className={highlightedClasses}>{data.User.displayName}</span>
            &nbsp;{values.textRemovedRequest}&nbsp;
            <span className={highlightedClasses}>
              {_.truncate(data.Data.title || data.Data.description, { length: 30, separator: '...' })}
            </span>
          </p>
        );
      default:
        return null;
    }
  }
}

export default ActivityText;
