import React from 'react';
import PropTypes from 'prop-types';
import withListener from '../withListener';
import { filterBundleActions } from '../../tools/callToActions';
import { ProductBannerComponent } from './ProductBanner';

export const BundleBannerComponent = props => {
    // transform Bundle summary to default summary schema
    const { data = {} } = props;
    const { summary, callToActions } = data;
    const bundleSummary = summary && {
        title: summary.title,
        details: summary.description,
        logoSrc: summary.images && summary.images[0]
    };
    const bundleCallToActions = callToActions && {
        ...callToActions,
        items: callToActions.items && callToActions.items.length ? callToActions.items.filter(filterBundleActions) : []
    };
    const transformedProps = {
        ...props,
        data: {
            ...data,
            summary: bundleSummary,
            callToActions: bundleCallToActions
        }
    };

    return <ProductBannerComponent {...transformedProps} />;
};

BundleBannerComponent.schema = () => {
    const originalSchema = ProductBannerComponent.schema();
    return {
        ...originalSchema,
        marketplaceData: {
            ...originalSchema.marketplaceData,
            summary: 'bundle.summary',
            callToActions: 'bundle.callToActions'
        }
    };
};

BundleBannerComponent.propTypes = {
    data: PropTypes.shape({
        summary: PropTypes.shape({
            title: PropTypes.string,
            description: PropTypes.string,
            images: PropTypes.arrayOf(PropTypes.string)
        })
    })
};

BundleBannerComponent.defaultProps = {
    data: {}
};

export default withListener(BundleBannerComponent);
