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

/**
 * A stateless component which renders Logo of TripAdvisor.
 * It can be with bubbles or without bubble component accept all standard attributes 
 * and events for rating Hotels.
 */

const TripAdvisor = props => {
    let ratingClassName = props.rating <= props.redMaxRating ? 'jp-red' : props.rating <= props.orangeMaxRating ? 'jp-orange' : 'jp-green';
    return (
        <div role='math' aria-label={'Tripadvisor ' + props.rating + ' rating and ' + props.reviews.toString().replace('(', '').replace(')', '') + ' for hotel/property '}      >
            <div
                className={props.isWithBubble ? 'jp-desktop-withbubble-container' : 'jp-desktop-withoutbubble-container'}
                onClick={props.onTripAdvisorClick}
                onKeyDown={props.onTripAdvisorKeyDown}
                role='presentation'
            >
                <div
                    aria-hidden
                    className='jp-tripadvisor-logo-container'
                >
                    <div
                        className='jp-tripadvisor-logo-container-img'
                    >
                        <img
                            src={props.imgSrc}
                            alt={props.imgAlt}
                            className='jp-img'
                        />
                    </div>
                    <div className={`jp-tripadvisor-logo-rating-value ${ratingClassName}`}
                    ><span>{props.rating}</span></div>
                    {props.isWithBubble ? <div className='jp-tripadvisor-logo-rating'>
                        <Rating
                            initialRating={props.rating}
                            readonly
                            onchange
                            emptySymbol={<img src={props.empImgSrc} alt={props.empImgAlt} />}
                            fullSymbol={<img src={props.fullImgSrc} alt={props.fullImgAlt} />}
                        />
                    </div> : null}
                    <div className='jp-tripadvisor-logo-reviews'
                    >{props.reviews}</div>
                </div>
            </div>
        </div>
    );
};

export default TripAdvisor;

TripAdvisor.defaultProps = {
    /** Specify the total number of reviews */
    reviews: '',
    /** Tripadvisor logo path to apply on element */
    imgSrc: '',
    /** Alternate text for the image */
    imgAlt: '',
    /** Specify the Source path of the Empty Rating logo */
    empImgSrc: '',
    /** Alternate text for the Empty Rating image */
    empImgAlt: '',
    /** Specify the Source path of the Full Rating logo */
    fullImgSrc: '',
    /** Alternate text for the Full Rating image */
    fullImgAlt: '',
    /** Alternate text for the image which is by default false */
    isWithBubble: true,
    /** Rating for the Hotels */
    rating: 0,
    /** Max red rating for the Hotels */
    redMaxRating: 2.99,
    /** Max orange rating for the Hotels */
    orangeMaxRating: 3.99
};

TripAdvisor.propTypes = {
    /** Tripadvisor logo path to apply on element */
    imgSrc: PropTypes.string,
    /** Alternate text for the Tripadvisor logo to apply on element */
    imgAlt: PropTypes.string,
    /** Empty Rating logo path to apply on element */
    empImgSrc: PropTypes.string,
    /** Alternate text for the Empty Rating to apply on element */
    empImgAlt: PropTypes.string,
    /** Full Rating path to apply on element */
    fullImgSrc: PropTypes.string,
    /** Alternate text for theFull Rating to apply on element */
    fullImgAlt: PropTypes.string,
    /** flag for Alternate text of the image  with or without bubble */
    isWithBubble: PropTypes.oneOfType([
        PropTypes.bool,
        PropTypes.number
    ]),
    /** Event to be triggered on click */
    onImgClick: PropTypes.func,
    /** Event to be triggered on keypress */
    onImgKeyDown: PropTypes.func,
    /** Rating for the Hotels */
    rating: PropTypes.number,
    /** No of reviews given by Tripadvisors */
    reviews: PropTypes.string,
    /** Event to be triggered on keypress */
    onTripAdvisorKeyDown: PropTypes.func,
    /** On click of block of Advisor */
    onTripAdvisorClick: PropTypes.func,
    /** Max red rating for the Hotels */
    redMaxRating: PropTypes.number,
    /** Max orange rating for the Hotels */
    orangeMaxRating: PropTypes.number
};