import React from 'react';
import PropTypes from 'prop-types';
import { createNamespace } from '../../../../tools/namingTools';
import Rating from '../../../../atoms/rating/Rating';

import './styles/CompareProductReviews.scss';

const n = createNamespace('CompareProductReviews');

export const CompareProductReviews = ({
    reviews,
    limit
}) => {
    const renderReview = item => (
        <div {...n('wrapper').withTestId().props}>
            <div {...n('header').props}>
                {item.imgSr && (<img src={item.imgSrc} alt={item.name} {...n('image').props} />)}
                {item.rating && (
                    <div {...n('rating').props}>
                        <Rating rating={item.rating} />
                        <div {...n('ratingInfo').props}>
                            <span {...n('name').props}>{item.name}</span>
                            <span {...n('date').props}>{item.date}</span>
                        </div>
                    </div>
                )}
            </div>
            {item.review && item.review.title && (
                <span {...n('title').props}>{item.review.title}</span>
            )}
            {item.review && item.review.description && (
                <p {...n('description').props}>{item.review.description}</p>
            )}
        </div>
    );

    return (
        <div>
            {reviews && reviews.length ? reviews.slice(0, limit).map(renderReview) : ''}
        </div>
    );
};

CompareProductReviews.isRenderable = item => item.top_reviews && item.top_reviews.length;

CompareProductReviews.propTypes = {
    reviews: PropTypes.arrayOf(PropTypes.shape({
        name: PropTypes.string,
        rating: PropTypes.number,
        date: PropTypes.string,
        review: PropTypes.string,
        imgSrc: PropTypes.string
    })),
    limit: PropTypes.number
};

CompareProductReviews.defaultProps = {
    reviews: [],
    limit: 1
};
