import React from 'react';
import PropTypes from 'prop-types';
import { stripSlash } from '../../tools/stringTools';
import { createNamespace } from '../../tools/namingTools';
import { getFormattedFullPriceElements } from '../../tools/components/pricing';
import { DEFAULT_IMG } from '../../constants/images';
import Image from '../image/Image';
import Pricing from '../pricing/Pricing';
import './styles/SelectedEdition.scss';

const n = createNamespace('SelectedEdition');

const SelectedEdition = ({
    selectedEdition: {
        name,
        description,
        plans
    },
    i18n: { startingAt },
    productImgSrc,
    productImageAlt,
    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 condensedModifier = isCondensed && 'condensed';
    const wrapperModifiers = [condensedModifier];

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

        const [price, unit, frequency] = formattedFullPriceElements;

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

    return (
        <div {...n('wrapper', wrapperModifiers).props}>
            <div {...n('details', formattedFullPriceElements && 'with-pricing').props}>
                <div {...n('thumbnailWrapper').props}>
                    <Image {...n('thumbnail').withTestId().props} src={productImgSrc || starImage} alt={productImageAlt} />
                </div>
                <div {...n('content').props}>
                    <h3 {...n('title').withTestId().withE2EId().props}>{name}</h3>
                    {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,
    productImageAlt: 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: DEFAULT_IMG,
    productImageAlt: '',
    description: '',
    isCondensed: false,
    showPricing: true,
    showDescription: true
};

export default SelectedEdition;
