import React from 'react';
import PropTypes from 'prop-types';
import { createNamespace } from '../../tools/namingTools';
import { generateUniqueID } from '../../tools/helpers';
import { cartItemShape } from '../../constants/prop-types/cart';
import { i18nMock as i18nCrossSellManagementMock } from '../../../mocks/application/crossSellManagement/i18n';

import Icon from '../icon/Icon';
import CartEditionPreview from '../cart-edition-preview/CartEditionPreview';
import CartAddonPreview from '../cart-addon-preview/CartAddonPreview';

import './styles/CartSelectionPreview.scss';

const n = createNamespace('CartSelectionPreview');
const CartSelectionPreview = ({
    cart,
    i18n
}) => {
    if (!cart) {
        return null;
    }
    const { itemDetails: editionDetails, childItems: addonItems } = cart;
    const i18nWithDefaults = {
        ...CartSelectionPreview.defaultProps.i18n,
        ...i18n
    };

    const renderAddon = ({ itemDetails = {} }) => {
        const { id, branding: { name } } = itemDetails;

        return (
            <li {...n('addon').withTestId().props} key={generateUniqueID([id, name])}>
                <CartAddonPreview {...itemDetails} />
            </li>
        );
    };

    return (
        <section {...n('wrapper').withTestId().withE2EId().props}>
            <div {...n('content').props}>
                <div {...n('info').props}>
                    <h2 {...n('title', 'hidden').props}>
                        {i18n.cartTitle}
                    </h2>
                    {editionDetails && (
                        <div {...n('edition').props}>
                            <h3 {...n('subtitle', 'hidden').props}>{i18nWithDefaults.selectedEdition}</h3>
                            <CartEditionPreview {...editionDetails} i18n={i18nWithDefaults} />
                        </div>
                    )}
                    {Boolean(addonItems && addonItems.length) && (
                        <div {...n('addonList').props}>
                            <h3 {...n('subtitle', 'hidden').props}>{i18nWithDefaults.selectedAddons}</h3>
                            <ul {...n('addonsList').props} aria-label={i18n.addons}>
                                {addonItems.map(renderAddon)}
                            </ul>
                        </div>
                    )}
                </div>
                <div {...n('status').props} aria-label={i18nWithDefaults.status}>
                    <Icon {...n('statusIcon').props} type="check" />
                    <span {...n('statusText').props}>{i18nWithDefaults.addedToCart}</span>
                </div>
            </div>
        </section>
    );
};

CartSelectionPreview.propTypes = {
    cart: PropTypes.shape(cartItemShape),
    i18n: PropTypes.shape({
        cartTitle: PropTypes.string,
        addedToCart: PropTypes.string,
        edition: PropTypes.string,
        vendor: PropTypes.string,
        selectedEdition: PropTypes.string,
        selectedAddons: PropTypes.string,
        addons: PropTypes.string,
        status: PropTypes.string
    })
};

CartSelectionPreview.defaultProps = {
    cart: null,
    i18n: i18nCrossSellManagementMock
};

export default CartSelectionPreview;
