import React from 'react';
import PropTypes from 'prop-types';
import withListener from '../withListener';
import { createNamespace } from '../../tools/namingTools';
import ProductEditionList, { defaultEditionsProps } from '../../atoms/product-edition/list/ProductEditionList';
import ProductAddonList, { defaultAddonsProps } from '../../atoms/product-addon/list/ProductAddonList';
import { ProductPlanComponent } from '../product-plan/ProductPlan';
import './styles/ProductPricing.scss';

const n = createNamespace('ProductPricing');

const ProductPricing = ({ data }) => {
    const {
        editions = {},
        addonProducts = {}
    } = data;

    const i18n = Object.assign({}, ProductPricing.defaultProps.data.i18n, data.i18n);

    return (
        <div {...n('container').props}>
            <div {...n('section').props}>
                <div {...n('editions').props}>
                    <ProductEditionList data={{ editions: editions.items, i18n }} hiddenTitle />
                </div>
                <div {...n('plans').props}>
                    <ProductPlanComponent data={editions} />
                </div>
            </div>
            { !!addonProducts.items.length && (
                <div {...n('section', 'alt-bg').props}>
                    <div {...n('addons').props}>
                        <ProductAddonList
                            data={{
                                addonProducts: {
                                    items: addonProducts.items,
                                    i18n
                                }
                            }}
                        />
                    </div>
                </div>
            )}
        </div>
    );
};

ProductPricing.propTypes = {
    data: PropTypes.shape({
        editions: defaultEditionsProps,
        addonProducts: defaultAddonsProps,
        i18n: PropTypes.shape({
            addons: PropTypes.string
        })
    })
};

ProductPricing.defaultProps = {
    data: {
        addonProducts: [],
        editions: [],
        i18n: {
            addons: 'Optional Add-Ons'
        }
    }
};

ProductPricing.schema = () => ({
    name: 'ProductPricing',
    title: 'uieditor.sfbComponent.productPricing.title',
    form: {},
    marketplaceData: {
        editions: 'application.editions',
        addonProducts: 'application.addonProducts',
        i18n: 'application.editions.i18n'
    }
});

export default withListener(ProductPricing);
