import React from 'react';
import PropTypes from 'prop-types';
import { createNamespace } from '../../tools/namingTools';
import { getA11yPricingText } from '../../tools/components/pricing';
import { LEFT, RIGHT } from '../../constants/alignment';
import './styles/Pricing.scss';

const n = createNamespace('Pricing');

const Pricing = ({
    caption,
    price,
    symbol,
    align,
    unit,
    frequency,
    formattedPrice,
    isEmphasis,
    isMultipleLine,
    textSeparator = '/',
    priceExtraClass,
    isConfigurator,
    priceExtraSuffixClass,
    uppercaseFirstLetter
}) => {
    // Make a text for the screen reader of a custom formatted full price
    const a11yPriceText = getA11yPricingText({
        price,
        formattedPrice,
        caption,
        symbol,
        unit,
        frequency,
        textSeparator
    });

    const hasPriceSuffix = unit || frequency;
    const emphasisModifier = isEmphasis && 'emphasis';
    const priceSymbolModifier = symbol && !formattedPrice && 'with-price-symbol';
    const multipleLineModifier = isMultipleLine && 'multiple-line';
    const alignModifier = align && `align-${align}`;
    const isConfiguratorModifier = isConfigurator && 'configurator';
    const uppercaseFirstLetterModifier = uppercaseFirstLetter && 'uppercase-first-letter';

    if ((price === undefined || price === null) && !formattedPrice) {
        return null;
    }

    return (
        <div {...n('wrapper').props}>
            {a11yPriceText && (
                <div {...n('srPrice').withTestId().props}>{a11yPriceText}</div>
            )}
            <div {...n('formattedPrice', [multipleLineModifier, alignModifier]).withTestId().props} aria-hidden={Boolean(a11yPriceText)}>
                {caption && (
                    <div {...n('caption', [multipleLineModifier, priceSymbolModifier]).props}>
                        {`${caption} `}
                    </div>
                )}
                <div {...n('contentWrapper', emphasisModifier).props}>
                    <div {...n('content', [emphasisModifier]).props}>
                        <span {...n('value', [emphasisModifier, isConfiguratorModifier, hasPriceSuffix && 'with-suffix']).withClass(priceExtraClass).props}>
                            {formattedPrice || (
                                <>
                                    {symbol && (<sup {...n('symbol', emphasisModifier).props}>{symbol}</sup>)}
                                    <span {...n('price').withTestId().withE2EId().props}>{price}</span>
                                </>
                            )}
                        </span>
                        {hasPriceSuffix && (
                            <span {...n('suffix', multipleLineModifier).withClass(priceExtraSuffixClass).props}>
                                {unit && (
                                    <span {...n('unit', uppercaseFirstLetterModifier).withTestId().props}>
                                        {unit}
                                    </span>
                                )}
                                {frequency && (
                                    <span {...n('frequency', uppercaseFirstLetterModifier).withTestId().props}>
                                        {`${textSeparator}${frequency}`}
                                    </span>
                                )}
                            </span>
                        )}
                    </div>
                </div>
            </div>
        </div>
    );
};

Pricing.propTypes = {
    caption: PropTypes.string,
    price: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.number
    ]),
    symbol: PropTypes.string,
    align: PropTypes.oneOf([LEFT.value, RIGHT.value]),
    unit: PropTypes.string,
    frequency: PropTypes.string,
    formattedPrice: PropTypes.string,
    isEmphasis: PropTypes.bool,
    isMultipleLine: PropTypes.bool,
    textSeparator: PropTypes.string,
    priceExtraClass: PropTypes.string,
    isConfigurator: PropTypes.bool,
    priceExtraSuffixClass: PropTypes.string,
    uppercaseFirstLetter: PropTypes.bool
};

Pricing.defaultProps = {
    caption: '',
    price: null,
    unit: '',
    frequency: '',
    symbol: null,
    align: null,
    formattedPrice: null,
    isEmphasis: false,
    isMultipleLine: false,
    textSeparator: '/',
    priceExtraClass: null,
    isConfigurator: false,
    priceExtraSuffixClass: null,
    uppercaseFirstLetter: false
};

export default Pricing;
