import React from 'react';
import PropTypes from 'prop-types';
import deepmerge from 'deepmerge';
import { createNamespace } from '../../tools/namingTools';
import { LAYOUT_VERTICAL, LAYOUT_HORIZONTAL } from '../../constants/layouts';
import { generateUniqueID } from '../../tools/helpers';
import Image from '../../atoms/image/Image';
import ButtonIcon from '../../atoms/button-icon/ButtonIcon';

import './styles/ProductFeaturedQuotes.scss';

const n = createNamespace('ProductFeaturedQuotes');

const ProductFeaturedQuotes = ({
    data: {
        featured,
        layout,
        i18n,
        logoSize,
        logoSpacing
    }
}) => {
    const i18nWithDefaults = deepmerge(ProductFeaturedQuotes.defaultProps.data.i18n, i18n);

    const componentVariables = {
        'logo-size': Boolean(logoSize) && `${logoSize}px`,
        'logo-spacing': Boolean(logoSpacing) && `${logoSpacing}px`
    };

    const renderFeaturedQuote = ({ link, linkDescription, source }) => {
        const { id, name, logoUrl } = source;

        return (
            <article {...n('quote', [layout || LAYOUT_VERTICAL]).withVariables(componentVariables).props} key={generateUniqueID([id, name])}>
                <h4 {...n('title', 'hidden').props}>{name}</h4>
                {logoUrl && (
                    <Image {...n('image').props} src={logoUrl} alt={name} />
                )}
                <div {...n('content').props}>
                    {linkDescription && (
                        <blockquote {...n('description').props}>{linkDescription}</blockquote>
                    )}
                    {link && (
                        <ButtonIcon aria-label={i18nWithDefaults.labels.readFullReview} {...n('button').withTestId().props} theme="secondary" url={link}>
                            {i18nWithDefaults.labels.readMore}
                        </ButtonIcon>
                    )}
                </div>
            </article>
        );
    };

    return featured && featured.length ? (
        <div {...n('wrapper').props}>
            {featured.map(renderFeaturedQuote)}
        </div>
    ) : '';
};

export const productQuoteShape = {
    link: PropTypes.string,
    linkDescription: PropTypes.string,
    source: PropTypes.shape({
        id: PropTypes.number,
        name: PropTypes.string,
        logoUrl: PropTypes.string
    })
};

ProductFeaturedQuotes.propTypes = {
    data: PropTypes.shape({
        featured: PropTypes.arrayOf(PropTypes.shape(productQuoteShape)),
        layout: PropTypes.oneOf([LAYOUT_VERTICAL, LAYOUT_HORIZONTAL]),
        logoSize: PropTypes.number,
        logoSpacing: PropTypes.number,
        i18n: PropTypes.shape({
            labels: PropTypes.shape({
                readMore: PropTypes.string,
                readFullReview: PropTypes.string
            })
        })
    })
};

ProductFeaturedQuotes.defaultProps = {
    data: {
        featured: null,
        layout: LAYOUT_VERTICAL,
        logoSize: null,
        logoSpacing: null,
        i18n: {
            labels: {
                readMore: 'Read More',
                readFullReview: 'Read full review'
            }
        }
    }
};

export default ProductFeaturedQuotes;
