import React from 'react';
import PropTypes from 'prop-types';
import { createNamespace } from '../../tools/namingTools';
import { getImageSrc } from '../../tools/images';
import Pricing from '../pricing/Pricing';
import Image from '../image/Image';
import './styles/BundleCard.scss';

const n = createNamespace('BundleCard');

const BundleCard = ({
    data: {
        card,
        edition,
        pricing
    }
}) => {
    if (!card) {
        return null;
    }

    const { title, overview, logoSrc, logoSrcset } = card;
    const src = getImageSrc(logoSrc, logoSrcset);

    return (
        <section {...n('container').props}>
            {title && <h1 {...n('title').withTestId().props}>{title}</h1>}
            {src && (
                <Image {...n('logo').withTestId().props} src={src} alt={title} />
            )}
            {overview && (
                <p {...n('description').withTestId().props}>{overview}</p>
            )}
            {pricing && pricing.value ? (
                <div {...n('pricing').withTestId().props}>
                    {edition && edition.name && (
                        <span {...n('priceCaption').withTestId().props}>{edition.name}</span>
                    )}
                    <Pricing
                        price={pricing.value}
                        frequency={pricing.frequency}
                        textSeparator=""
                        isEmphasis
                    />
                </div>
            ) : ''}
        </section>
    );
};

export const bundleCardShape = {
    title: PropTypes.string,
    overview: PropTypes.string,
    logoSrc: PropTypes.string,
    logoSrcset: PropTypes.shape({
        default: PropTypes.string,
        '2x': PropTypes.string
    })
};

export const bundlePricingShape = {
    productName: PropTypes.string,
    fullName: PropTypes.string,
    name: PropTypes.string,
    value: PropTypes.string,
    frequency: PropTypes.string
};

BundleCard.propTypes = {
    data: PropTypes.shape({
        card: PropTypes.shape(bundleCardShape),
        edition: PropTypes.shape({
            name: PropTypes.string
        }),
        pricing: PropTypes.shape(bundlePricingShape)
    })
};

BundleCard.defaultProps = {
    data: {
        card: null,
        edition: null,
        pricing: null
    }
};

export default BundleCard;
