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

const n = createNamespace('SelectedEdition');

const getFormattedFullPriceElements = (unitPrice = [], flatPrice) => {
    if (flatPrice) {
        return flatPrice.formattedFullPriceElements;
    }
    const [{ usageRange = [{}] }] = unitPrice;
    const [{ formattedFullPriceElements }] = usageRange;
    return formattedFullPriceElements;
};

const SelectedEdition = ({
    selectedEdition: {
        name,
        description,
        plans
    },
    i18n: { startingAt },
    productImgSrc,
    isCondensed,
    showPricing,
    showDescription
}) => {
    const starImage = SelectedEdition.defaultProps.productImgSrc;
    const [{ costs: { unitPrice = [{}], flatPrice } = {} }] = (Array.isArray(plans) && plans.length > 0) ? plans : [{}];
    const formattedFullPriceElements = getFormattedFullPriceElements(unitPrice, flatPrice);

    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>
        );
    };
    const modifiers = [
        isCondensed && 'condensed'
    ];

    return (
        <div {...n('wrapper', modifiers).props}>
            <div {...n('details', formattedFullPriceElements && 'with-pricing').props}>
                <div {...n('thumbnailWrapper').props}>
                    <Image {...n('thumbnail').withTestId().props} src={productImgSrc || starImage} />
                </div>
                <div {...n('content').props}>
                    <h2 {...n('title').withTestId().withE2EId().props}>{name}</h2>
                    {showDescription && description && (
                        <div
                            {...n('description').withTestId().props}
                            dangerouslySetInnerHTML={{ __html: description }}
                        />
                    )}
                </div>
            </div>
            {showPricing && renderPrice()}
        </div>
    );
};

SelectedEdition.propTypes = {
    selectedEdition: PropTypes.shape({
        name: PropTypes.string,
        description: PropTypes.string,
        plans: PropTypes.arrayOf(PropTypes.shape({
            costs: PropTypes.shape({
                unitPrice: PropTypes.arrayOf(PropTypes.shape({
                    usageRange: PropTypes.arrayOf(PropTypes.shape({
                        formattedFullPriceElements: PropTypes.array
                    }))
                }))
            })
        }))
    }),
    i18n: PropTypes.shape({
        startingAt: PropTypes.string
    }),
    productImgSrc: PropTypes.string,
    description: PropTypes.string,
    isCondensed: PropTypes.bool,
    showPricing: PropTypes.bool,
    showDescription: PropTypes.bool
};

SelectedEdition.defaultProps = {
    selectedEdition: {
        name: '',
        description: '',
        plans: [{
            costs: {
                unitPrice: [{
                    usageRange: [{
                        formattedFullPriceElements: []
                    }]
                }]
            }
        }]
    },
    i18n: {
        startingAt: 'Starting at'
    },
    productImgSrc: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mO8ff12PQAIMAMONuPA0AAAAABJRU5ErkJggg==',
    description: '',
    isCondensed: false,
    showPricing: true,
    showDescription: true
};

export default SelectedEdition;
