
import React from 'react';
import PropTypes from 'prop-types';
import { createNamespace } from '../../../../tools/namingTools';
import { PRODUCT_DEFAULT_IMG } from '../../../../constants/images';
import Rating from '../../../../atoms/rating/Rating';
import Pricing from '../../../../atoms/pricing/Pricing';
import Button from '../../../../atoms/button/Button';
import Icon from '../../../../atoms/icon/Icon';

import './styles/CompareProductDescription.scss';

const n = createNamespace('CompareProductDescription');

export const CompareProductDescription = ({
    iconUrl,
    name,
    description,
    rating,
    numberOfReview,
    startingPrice,
    settings,
    i18n,
    url
}) => {
    const imageUrl = iconUrl || PRODUCT_DEFAULT_IMG;
    const shouldRenderRating = (rating && numberOfReview > 0);

    return (
        <React.Fragment>
            {name ? (
                <div {...n('container').withTestId().props}>
                    <div {...n('summary').props}>
                        {imageUrl && (
                            <div {...n('imageWrapper').props}>
                                <img src={imageUrl} alt={name} {...n('image').withTestId().props} />
                            </div>
                        )}
                        <h2 {...n('title').withTestId().props}>{name}</h2>
                        {description && (
                            <p {...n('description').withTestId().props}>{description}</p>
                        )}
                        {shouldRenderRating && (
                            <div {...n('starsWrapper').props}>
                                <Rating rating={rating} numRatings={numberOfReview} displayRatingNumber={false} />
                            </div>
                        )}
                        {settings && settings.isStartingPriceVisible && startingPrice && startingPrice.price && (
                            <div {...n('pricing').withTestId().props}>
                                <Pricing
                                    price={startingPrice.price}
                                    frequency={startingPrice.frequency.label}
                                    caption={startingPrice.priceCaption}
                                    symbol={startingPrice.symbol}
                                    isEmphasis
                                />
                            </div>
                        )}
                    </div>
                    <div {...n('btnContainer').props}>
                        <Button url={url} type="emphasis">{i18n.buyNow}</Button>
                    </div>
                </div>
            ) : (
                <React.Fragment>
                    <div {...n('imageWrapper', 'add').props}>
                        <Icon type="star" fill="#c0c0c0" width="60px" />
                    </div>

                    <div {...n('btnContainer', 'add').props}>
                        <Button url={url}>{i18n.add}</Button>
                    </div>
                </React.Fragment>
            )}
        </React.Fragment>
    );
};

CompareProductDescription.propTypes = {
    id: PropTypes.number,
    name: PropTypes.string,
    description: PropTypes.string,
    iconUrl: PropTypes.string,
    rating: PropTypes.number,
    numberOfReview: PropTypes.number,
    startingPrice: PropTypes.shape({
        formattedPrice: PropTypes.string,
        price: PropTypes.string,
        priceCaption: PropTypes.string,
        symbol: PropTypes.string,
        frequency: PropTypes.shape({
            label: PropTypes.string,
            shortLabel: PropTypes.string,
            id: PropTypes.string
        })
    }),
    settings: PropTypes.shape({
        isStartingPriceVisible: PropTypes.bool
    }),
    i18n: PropTypes.shape({
        viewProfile: PropTypes.string,
        buy: PropTypes.string,
        add: PropTypes.string,
        buyNow: PropTypes.string
    }).isRequired,
    url: PropTypes.string
};

CompareProductDescription.defaultProps = {
    id: null,
    name: '',
    description: '',
    iconUrl: '',
    rating: null,
    numberOfReview: 0,
    startingPrice: {},
    settings: {},
    url: ''
};
