import React from 'react';
import Gallery from './gallery';
import {formatPrice} from '../lib/helpers';

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;
    if (!listing) {
      return null;
    }
    const descriptionClasses = descriptionExpanded ? "ld-description expanded" : "ld-description";
    const images = listing.images.map((image) => ({original: image, thumbnail: image}))

    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">
          <Gallery
            dispatch={this.props.dispatch}
            images={listing.images}
            imageIndex={this.props.imageIndex} />
          <div className="ld-price-address-box">
            <div className="ld-price">
              {formatPrice(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>
              {listing.rooms} 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>
              {listing.floor}. sprat
            </div>
            <div className="ld-feature-box">
              <i className="fa fa-home"></i>
              --
            </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>);
  }
}