import React from "react";
import classnames from "classnames";

class SearchResultsListItem extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    const { item, onClick } = this.props;
    if (onClick) onClick(item);
  }

  render() {
    const { item, selected } = this.props;
    const itemClass = classnames({
      "cm-list-group-item": true,
      "search-result-item": true,
      "overflow-ellipsis": true,
      selected: selected,
    });
    let titleTxt = item.secondaryTxt
      ? `${item.displayName} ${item.secondaryTxt}`
      : `${item.displayName}`;
    titleTxt = item.prefix ? `${item.prefix}:  ${titleTxt}` : `${titleTxt}`;
    return (
      <li
        onClick={this.handleClick}
        className={itemClass}
        title={`${titleTxt}`}
      >
        <i className={item.iconClass + " icon-inline"}></i>
        {item.displayName}
        {item.secondaryTxt ? (
          <div
            className="overflow-ellipsis"
            style={{
              marginLeft: "30px",
            }}
          >
            {item.secondaryTxt}
          </div>
        ) : null}
      </li>
    );
  }
}

export default SearchResultsListItem;
