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

const n = createNamespace('Pricing');

const Pricing = ({
    caption,
    price,
    symbol,
    align,
    unit,
    prefixIcon,
    frequency,
    formattedPrice,
    isEmphasis,
    isMultipleLine,
    textSeparator = '/',
    limitLabel
}) => {
    const emphasisModifier = isEmphasis && 'emphasis';
    const priceSymbolModifier = symbol && !formattedPrice && 'with-price-symbol';
    const prefixIconModifier = prefixIcon && 'with-prefix-icon';
    const multipleLineModifier = isMultipleLine && 'multiple-line';
    const alignModifier = align && `align-${align}`;

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

    return (
        <div {...n('wrapper', [multipleLineModifier, alignModifier]).props}>
            {caption && (
                <div {...n('caption', [multipleLineModifier, priceSymbolModifier]).props}>
                    {`${caption} `}
                </div>
            )}
            <div {...n('contentWrapper', [prefixIconModifier, emphasisModifier]).props}>
                {prefixIcon && (
                    <Icon type={prefixIcon} {...n('prefixIcon', emphasisModifier).props} />
                )}
                <div {...n('content', multipleLineModifier).props}>
                    <span {...n('value', emphasisModifier).props}>
                        {formattedPrice || (
                            <React.Fragment>
                                {symbol && (<sup {...n('symbol', emphasisModifier).props}>{symbol}</sup>)}
                                <span {...n('price').withTestId().withE2EId().props}>{price}</span>
                            </React.Fragment>
                        )}
                    </span>
                    <span {...n('suffix').props}>
                        {unit && (
                            <span {...n('unit').withTestId().props}>
                                {unit}
                            </span>
                        )}
                        {frequency && (
                            <span {...n('frequency').withTestId().props}>
                                {`${textSeparator}${frequency}`}
                            </span>
                        )}
                    </span>
                </div>
                {limitLabel && (
                    <span {...n('limitLabel').withTestId().props}>
                        {limitLabel}
                    </span>
                )}
            </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,
    prefixIcon: PropTypes.string,
    formattedPrice: PropTypes.string,
    isEmphasis: PropTypes.bool,
    isMultipleLine: PropTypes.bool,
    textSeparator: PropTypes.string,
    limitLabel: PropTypes.string
};

Pricing.defaultProps = {
    caption: '',
    price: null,
    unit: '',
    frequency: '',
    prefixIcon: '',
    symbol: null,
    align: null,
    formattedPrice: null,
    isEmphasis: false,
    isMultipleLine: false,
    textSeparator: '/',
    limitLabel: ''
};

export default Pricing;
