import React from 'react';
import PropTypes from 'prop-types';
import './styles/selected-addon.scss';
import { createNamespace } from '../../tools/namingTools';
import { stripSlash } from '../../tools/stringTools';
import Icon from '../icon/Icon';
import Pricing from '../pricing/Pricing';

const n = createNamespace('SelectedAddon');

const SelectedAddon = ({
    data: { edition, name, description },
    i18n: { startingAt },
    showPricing,
    showDescription
}) => {
    const [{ plans }] = edition;
    const [{ costs: { unitPrice, flatPrice } }] = plans;
    let formattedFullPriceElements;
    if (unitPrice && unitPrice.length) {
        const [{ usageRange = [{}] }] = unitPrice;
        formattedFullPriceElements = usageRange[0].formattedFullPriceElements // eslint-disable-line
    } else {
        formattedFullPriceElements = flatPrice.formattedFullPriceElements;  // eslint-disable-line
    }

    const renderPrice = () => {
        if (!formattedFullPriceElements || !formattedFullPriceElements.length) {
            return '';
        }

        const [price, unit, frequency] = formattedFullPriceElements;

        return (
            <div {...n('price').props}>
                <Pricing
                    isEmphasis
                    isMultipleLine
                    price={price}
                    caption={startingAt}
                    unit={unit && stripSlash(unit.toLowerCase())}
                    frequency={frequency && stripSlash(frequency.toLowerCase())}
                />
            </div>
        );
    };

    return (
        <div {...n('wrapper').props}>
            <div {...n('details', formattedFullPriceElements && 'with-pricing').props}>
                <div {...n('thumbnailWrapper').props}>
                    <Icon type="addon" {...n('thumbnail').withTestId().props} />
                </div>
                <div {...n('content').props}>
                    <h2 {...n('title').withTestId().props}>{name}</h2>
                    {showDescription && description && (
                        <div {...n('description').withTestId().props} dangerouslySetInnerHTML={{ __html: description }} />
                    )}
                </div>
            </div>
            {showPricing && renderPrice()}
        </div>
    );
};

SelectedAddon.propTypes = {
    data: PropTypes.shape({
        name: PropTypes.string,
        description: PropTypes.string,
        edition: PropTypes.arrayOf(PropTypes.shape({
            name: PropTypes.string,
            costs: PropTypes.shape({
                unitPrice: PropTypes.arrayOf(PropTypes.shape({
                    usageRange: PropTypes.arrayOf(PropTypes.shape({
                        formattedFullPriceElements: PropTypes.array
                    }))
                }))
            })
        }))
    }),
    i18n: PropTypes.shape({
        startingAt: PropTypes.string
    }),
    showPricing: PropTypes.bool,
    showDescription: PropTypes.bool
};

SelectedAddon.defaultProps = {
    data: {
        name: '',
        description: '',
        edition: [{
            name: '',
            plans: [{
                costs: {
                    unitPrice: [{
                        usageRange: [{
                            formattedFullPriceElements: []
                        }]
                    }]
                }
            }]
        }]
    },
    i18n: {
        startingAt: 'Starting at'
    },
    showPricing: true,
    showDescription: true
};

export default SelectedAddon;
