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

const n = createNamespace('BundleCard');

const BundleCard = ({
    card,
    edition,
    pricing,
    i18n,
    ...otherProps
}) => {
    if (!card) {
        return null;
    }

    const i18nWithDefaults = { ...BundleCard.defaultProps.i18n, ...i18n };
    const { className: extraClass } = otherProps;
    const { title, overview, logoSrc, logoSrcset, logoAlt } = card;

    const titleId = generateUniqueID([title, overview]);

    return (
        <article {...n('container').withClass(extraClass).props} aria-labelledby={titleId}>
            {title && <h3 {...n('title').withTestId().props} id={titleId}>{title}</h3>}
            {logoSrc && (
                <Image {...n('logo').withTestId().props} src={logoSrc} srcSet={logoSrcset} alt={logoAlt} />
            )}
            {overview && (
                <p {...n('description').withTestId().props}>{overview}</p>
            )}
            {pricing && pricing.value ? (
                <div {...n('pricing').withTestId().props} aria-label={i18nWithDefaults.pricing}>
                    {edition && edition.name && (
                        <span {...n('priceCaption').withTestId().props}>{edition.name}</span>
                    )}
                    <Pricing
                        price={pricing.value}
                        frequency={pricing.frequency}
                        textSeparator=""
                        isEmphasis
                    />
                </div>
            ) : ''}
        </article>
    );
};

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

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

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

BundleCard.defaultProps = {
    card: null,
    edition: null,
    pricing: null,
    i18n: {
        pricing: 'Pricing'
    }
};

export default BundleCard;
