import React from 'react';

export default class ListingDetails extends React.Component {
  onReadMore (e) {
    e.preventDefault();
    this.props.dispatch({type: 'EXPAND_DESCRIPTION'});
  }

  onBackClick() {
    if (this.props.onBackClick) {
      this.props.onBackClick();
    }
  }

  render() {
    const {listing, descriptionExpanded} = this.props;

    const descriptionClasses = descriptionExpanded ? "ld-description expanded" : "ld-description";
    return (
      <div className="ld-container">
        <div className="ld-header">
          <div className="back-to-results">
            <button className="back-to-results-btn"
              onClick={this.onBackClick.bind(this)}>
              <i className="fa fa-arrow-left" aria-hidden="true"></i>
              <span>
                Nazad na rezultate
              </span>
            </button>
          </div>
          <button className="hide-listing">
            <i className="fa fa-thumbs-o-down" aria-hidden="true"></i>
            <span>
              Sakrij
            </span>
          </button>
        </div>

        <div className="ld-details">
          <div className="ld-image-container">
            <img src={listing.images[0]}></img>
          </div>
          <div className="ld-price-address-box">
            <div className="ld-price">
              {listing.price}
            </div>

            <div className="ld-address">
              <div className="">{listing.address}</div>
              <div className="">{listing.location}</div>
            </div>
          </div>

          <div className="ld-features">
            <div className="ld-feature-box">
              <i className="fa fa-bed"></i>
              4 sobe
            </div>
            <div className="ld-feature-box">
              <i className="fa fa-home"></i>
              {listing.size}m2
            </div>
            <div className="ld-feature-box">
              <i className="fa fa-home"></i>
              1. sprat
            </div>
            <div className="ld-feature-box">
              <i className="fa fa-home"></i>
              Balkon
            </div>
          </div>
          <div className="ld-check-availability">
            <button>Kontaktiraj</button>
          </div>
          <div className={descriptionClasses}>
            {listing.longDescription}
          </div>
          {!descriptionExpanded
            ?
              <div className="ld-read-more">
                <a href="" onClick={this.onReadMore.bind(this)}>Pročitajte više</a>
              </div>
              : null}
          <div className="ld-footer">
          </div>
        </div>
      </div>);
  }
}