import React from 'react';
import PropTypes from 'prop-types';
import withListener from '../withListener';
import { createNamespace } from '../../tools/namingTools';
import { getImageSrc } from '../../tools/images';
import Button from '../../atoms/button/Button';
import './styles/BundleSummary.scss';

const n = createNamespace('BundleSummary');

export const BundleSummaryComponent = ({
    data: {
        overview: {
            title,
            description,
            image,
            imageSrcSet
        },
        url,
        i18n
    }
}) => {
    const src = getImageSrc(image, imageSrcSet);

    return (
        <section {...n('container').withTestId().props}>
            <div {...n('row').props}>
                <div {...n('content').props}>
                    <h1 {...n('title', 'hidden').withTestId().props}>{title}</h1>
                    <p {...n('description').withTestId().props}>{description}</p>
                    <div {...n('buttons').props}>
                        <Button type="primary" size="small" url={url}>
                            {i18n ? i18n.viewProduct : BundleSummaryComponent.defaultProps.data.i18n.viewProduct}
                        </Button>
                    </div>
                </div>
                {src && (
                    <div {...n('imageContainer').props}>
                        <img {...n('image').withTestId().props} src={src} alt="" />
                    </div>
                )}
            </div>
        </section>
    );
};

export const bundleSummaryShape = {
    title: PropTypes.string,
    description: PropTypes.string,
    image: PropTypes.string,
    imageSrcSet: PropTypes.shape({
        default: PropTypes.string,
        '2x': PropTypes.string
    })
};

BundleSummaryComponent.propTypes = {
    data: PropTypes.shape({
        overview: PropTypes.shape(bundleSummaryShape),
        url: PropTypes.string,
        i18n: PropTypes.shape({
            viewProduct: PropTypes.string
        })
    })
};

BundleSummaryComponent.defaultProps = {
    data: {
        overview: {
            title: '',
            description: '',
            image: '',
            imageSrcSet: null
        },
        url: '',
        i18n: {
            viewProduct: ''
        }
    }
};

export default withListener(BundleSummaryComponent);
