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 () {
    this.props.dispatch({
      type: 'UPDATE_ROUTE',
      action: {
        toDispatch: {
          type: 'BACK_TO_RESULTS'
        },
        params: {
          listingId: null
        }
      }
    })
    this.props.dispatch({type: 'BACK_TO_RESULTS'})
  }

  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" />
              <span>
                Nazad na rezultate
              </span>
            </button>
          </div>
          <button className="hide-listing">
            <i className="fa fa-thumbs-o-down" aria-hidden="true" />
            <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" />
              {listing.rooms} sobe
            </div>
            <div className="ld-feature-box">
              <i className="fa fa-home" />
              {listing.size}m2
            </div>
            <div className="ld-feature-box">
              <i className="fa fa-home" />
              {listing.floor}. sprat
            </div>
            <div className="ld-feature-box">
              <i className="fa fa-home" />
              --
            </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>
    )
  }
}