import React from 'react';
import PropTypes from 'prop-types';
import withListener from '../withListener';
import { createNamespace } from '../../tools/namingTools';
import Image from '../../atoms/image/Image';
import ProductBundleDescription, { bundleLogoShape } from '../product-bundle-description/ProductBundleDescription';
import './styles/ProductBundleViewer.scss';

const n = createNamespace('ProductBundleViewer');

export const ProductBundleViewerComponent = ({
    data: {
        overview,
        items
    }
}) => {
    if (!overview) {
        return null;
    }

    const { image: overviewImage, title: overviewTitle } = overview;

    return (
        <div {...n('container').withTestId().props}>
            <div {...n('row').props}>
                {overviewImage && (
                    <div {...n('imageViewer').withTestId().props}>
                        <Image
                            src={overviewImage}
                            alt={overviewTitle}
                            {...n('image').withTestId().props}
                        />
                    </div>
                )}
                <div {...n('description').withTestId().props}>
                    <ProductBundleDescription data={{ overview, items }} />
                </div>
            </div>
        </div>
    );
};

ProductBundleViewerComponent.schema = () => ({
    name: 'ProductBundleViewer',
    title: 'uieditor.sfbComponent.productBundleViewer.title',
    iconName: '',
    form: {
    },
    marketplaceData: {
        overview: 'bundle.overview',
        items: 'bundle.items'
    }
});

ProductBundleViewerComponent.propTypes = {
    data: PropTypes.shape({
        overview: PropTypes.shape({
            description: PropTypes.string,
            image: PropTypes.string,
            title: PropTypes.string
        }),
        items: PropTypes.arrayOf(bundleLogoShape)
    })
};

ProductBundleViewerComponent.defaultProps = {
    data: {
        overview: {
            description: '',
            image: '',
            title: ''
        },
        items: []
    }
};

export default withListener(ProductBundleViewerComponent);
