import React from 'react';
import PropTypes from 'prop-types';
import CardPrice from '../CardPrice/CardPrice';
import './CardApartments.scss';

const CardApartments = ({result, index}) => {
  const carouselId = "carouselExampleIndicators".concat(index);
  const carouselIndicator = "#".concat(carouselId);
  const pricesId = "prices".concat(index);
  const pricesIndicatord = "#".concat(pricesId);
    return(
        <>
        {
          console.log(result)
        }
            <div className="card">
                <div className="card-body">
                    {result.lastUpdate !=undefined ?
                        <div className="ribbon-wrapper ribbon-lg">
                        <div className="ribbon bg-primary">
                          {result.lastUpdate}
                        </div>
                      </div> :''
                    }
                    <div className="row">
                      <div className="col-md-4">
                      <div id={carouselId} className="carousel slide" data-ride="carousel">
                      <ol className="carousel-indicators">
                                      
                          {result.images.map((image, i) =>
                                      (image !== undefined && image.src !==undefined ?
                                      i === 1 ?                                             
                                      <li data-target={carouselIndicator} data-slide-to={i} className="active"></li>
                                      :
                                      <li data-target={carouselIndicator} data-slide-to={i} className=""></li>
                              :""
                          ))}   
                          </ol>
                          <div className="carousel-inner">
                          {
                                      result.images.map((image, i) =>
                                          (image !== undefined && image.src !== undefined ?
                                              i === 0 ?
                                              <div className="carousel-item active" key={i} >
                                                  <img height="269px" className="d-block w-100"
                                                  src={image.src}
                                                  alt= {i} />
                                              </div>
                                              :
                                              <div className="carousel-item" key={i}  >
                                                  <img height="269px" className="d-block w-100"
                                                  src={image.src}
                                                  alt= {i} />
                                              </div>
                                          :'')
                                          )
                                      }
                            
                          
                          </div>
                          <a className="carousel-control-prev" href={carouselIndicator} role="button"
                            data-slide="prev">
                            <span className="carousel-control-custom-icon" aria-hidden="true">
                              <i className="fas fa-chevron-left"></i>
                            </span>
                            <span className="sr-only">Previous</span>
                          </a>
                          <a className="carousel-control-next" href={carouselIndicator} role="button"
                            data-slide="next">
                            <span className="carousel-control-custom-icon" aria-hidden="true">
                              <i className="fas fa-chevron-right"></i>
                            </span>
                            <span className="sr-only">Next</span>
                          </a>
                        </div>
                      </div>
                      <div className="col-md-8">              
                      {result.name !== undefined ? <h2><a href={result.url}>{result.name}
                      </a> <span className="text-black-50 text-sm"><i className="fas fa-clock"></i> {result.contact.todayHours}</span>
                      </h2>: ''}
                        {result.address != undefined ? 
                          <p className="lead">
                              {result.address.street !== undefined ? <span> {result.address.street}, </span>:''}
                              {result.address.city !== undefined ? <span> {result.address.city}, </span>:''}
                              {result.address.zip !== undefined ? <span> {result.address.zip.code} {result.address.zip.state}</span>:''}
                          </p> 
                      : ''}
                        <h3 className="strong">
                          <span>{result.rentInfo !=undefined ? result.rentInfo:'' } </span>
                          <a className="text-sm" data-toggle="collapse" href={pricesIndicatord} role="button" aria-expanded="true" aria-controls="collapseExample">
                            view all prices
                          </a>
                        </h3>
                        <p className="card-text mb-1">
                          {result.description !== undefined ? result.description.substr(0,100) + "..." : ''}
                        </p>
                        <div className="row">
                          <div className="col-md-9">
                            <div className="row">
                              <div className="col">
                              {
                                  result.features.slice(0, 8).map((feature, i) => <p key={i} className="badge badge-primary ml-1">{feature}</p>)
                              }
                              </div>
                            </div>
                            <div className="row">
                              { result.contact !== undefined && result.contact.phone != undefined  ? <span className="mr-3 lead"><i className="fas fa-phone">{result.contact.phone}</i></span> : ''}
                              { result.contact !== undefined && result.contact.url !== undefined ? <span className="mr-3 lead"><a href={result.contact.url}><i className="fas fa-external-link-square-alt"></i> View property site</a></span>: '' }
                            </div>
                            
                          </div>
                          <div className="col-md-3">
                            <div className="info-box mb-0">
                              <span className="info-box-icon bg-danger"><i className="far fa-star"></i></span>
                              {result.review != undefined ?
                                  <div className="info-box-content">
                                  <span className="info-box-text">Review</span>
                                  <span className="info-box-number">{result.review} stars</span>
                                  </div>
                              :''}
                            </div>
                          </div>
                        </div>

                      </div>
                    </div>
                    {/* { (result.prices !== undefined && result.prices.length > 0) ? */}
                    <div className="collapse" id={pricesId} >
                      <hr />
                      <div className="row">
                      { result.prices.map((price,index) =>   <CardPrice key={index} info={price} />) }
                      </div>
                      </div>
                    {/* :'' */}
                    
                  
                </div>
              </div>
        </>
    );
}

CardApartments.propTypes = {
    result: PropTypes.object,
    index : PropTypes.string
}
export default CardApartments;