import React from 'react';
import PropTypes from 'prop-types';
import withListener from '../withListener';
import { createNamespace } from '../../tools/namingTools';
import { addonShape } from '../../constants/components/prop-types/addon';
import { editionsPropTypes } from '../../constants/prop-types/application/editions';
import { ProductPlanComponent } from '../product-plan/ProductPlan';
import ProductEditionList from '../../atoms/product-edition/list/ProductEditionList';
import ProductAddonList from '../../atoms/product-addon/list/ProductAddonList';
import { parseToBool } from '../../tools/helpers';
import { TOGGLE } from '../../constants/schemaComponentTypes';

const n = createNamespace('ProductPricing');

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

    const i18n = Object.assign({}, ProductPricing.defaultProps.data.i18n, data.i18n);
    const [isIncludedHidden] = parseToBool(settings.isIncludedHidden);


    return (
        <div {...n('container').props}>
            <div {...n('section').props}>
                <div {...n('editions').props}>
                    <ProductEditionList
                        data={{ editions: editions.items, i18n }}
                        hiddenTitle
                        isIncludedHidden={isIncludedHidden}
                    />
                </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: PropTypes.shape(editionsPropTypes),
        addonProducts: addonShape,
        i18n: PropTypes.shape({
            optionalAddOns: PropTypes.string
        })
    }),
    settings: PropTypes.shape({
        isIncludedHidden: PropTypes.bool
    })
};

ProductPricing.defaultProps = {
    data: {
        addonProducts: [],
        editions: []
    }
};

ProductPricing.schema = () => ({
    name: 'ProductPricing',
    title: 'uieditor.sfbComponent.productPricing.title',
    form: {
        isIncludedHidden: {
            defaultValue: false,
            labelOff: 'uieditor.sfbComponent.productPricing.isIncludedHidden.labelOff',
            labelOn: 'uieditor.sfbComponent.productPricing.isIncludedHidden.labelOn',
            type: TOGGLE
        }
    },
    marketplaceData: {
        editions: 'application.editions',
        addonProducts: 'application.addonProducts',
        i18n: 'application.editions.i18n'
    }
});

const SETTINGS = ProductPricing.schema().form;

ProductPricing.defaultProps = {
    data: {
        addonProducts: [],
        editions: [],
        i18n: {
            optionalAddOns: 'Optional Add-Ons'
        }
    },
    settings: {
        isIncludedHidden: SETTINGS.isIncludedHidden.defaultValue
    }
};

export default withListener(ProductPricing);
