import React from 'react';
import PropTypes from 'prop-types';

const CardTownHouses = ({result, index}) => {
    const carouselId = "carouselExampleIndicators".concat(index);
    const carouselIndicator = "#".concat(carouselId);

    return(
        <>
        {
          console.log("town houses")
        }
            <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>
                    
                    </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> 
                    : ''}
                      {result.rentInfo !=undefined ? <h3 className="strong">{result.rentInfo}</h3>:'' }
                      <p className="card-text mb-1">
                        {result.description !== undefined ? result.description.substr(0,100) + "..." : ''}
                      </p>
                      <div className="row">
                          
                        <div className="col-md-8">
                          <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 ? <span className="mr-3 lead"><i className="fas fa-user"></i>{result.contact.agentFullName}</span>: '' }
                          </div>
                          
                        </div>
                        
                      </div>

                    </div>
                  </div>
                </div>
              </div>
        </>
    );

}

CardTownHouses.propTypes = {
    result: PropTypes.object,
    index : PropTypes.number
}

export default CardTownHouses;