import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';

const PricePropType = {
    price: PropTypes.string,
    bonusPrice: PropTypes.string,
    discountValue: PropTypes.string
};

export class CatalogSimplePrice extends React.PureComponent {
    static propTypes = {
        pricePurchase: PropTypes.shape(PricePropType),
        priceAnnual: PropTypes.shape(PricePropType),
        priceMonthly: PropTypes.shape(PricePropType),
        isPriceFrom: PropTypes.bool,
        shouldPreserveFromPadding: PropTypes.bool,
        isCentered: PropTypes.bool,
        isAlignRight: PropTypes.bool,
        testAutomationId: PropTypes.string,
        textFrom: PropTypes.string,
        textOr: PropTypes.string,
        textPerMonth: PropTypes.string,
        textPerYear: PropTypes.string,
        textOff: PropTypes.string
    };

    static defaultProps = {
        pricePurchase: null,
        priceAnnual: null,
        priceMonthly: null,
        priceOneTime: null,
        isPriceFrom: false,
        shouldPreserveFromPadding: false,
        isCentered: false,
        isAlignRight: false,
        testAutomationId: 'catalogItemPrice',
        textFrom: 'from',
        textOr: 'or',
        textPerMonth: 'month',
        textPerYear: 'year',
        textOff: 'off'
    };

    renderPrefix(text) {
        const {shouldPreserveFromPadding, isCentered, isAlignRight} = this.props;

        if (!text && !shouldPreserveFromPadding) {
            return null;
        }

        const className = classnames('rc-catalog-simple-price__prefix', {
            'rc-catalog-simple-price__prefix--preventFixSize':
                !shouldPreserveFromPadding || isCentered || isAlignRight
        });

        return (
            <span className={className} data-test-automation-id="prefix">
                {text}
            </span>
        );
    }

    renderFrom() {
        const {isPriceFrom, textFrom} = this.props;
        const text = isPriceFrom ? textFrom : null;

        return this.renderPrefix(text);
    }

    renderOr() {
        const {textOr} = this.props;

        return this.renderPrefix(textOr);
    }

    renderDiscount({price, bonusPrice, discountValue}) {
        if (!discountValue) {
            return null;
        }

        const {textOff, shouldPreserveFromPadding, isCentered, isAlignRight} = this.props;

        const fromPadding =
            !(isCentered || isAlignRight) && shouldPreserveFromPadding ? this.renderPrefix() : null;

        return (
            <div className="rc-catalog-simple-price__discount" data-test-automation-id="discount">
                {fromPadding}
                <s className="rc-catalog-simple-price__old-price">{price}</s>
                &nbsp;
                <span
                    className="rc-catalog-simple-price__discount-amount"
                    data-test-automation-id="text">
                    {discountValue} {textOff}
                </span>
            </div>
        );
    }

    renderPrice(price, period = null) {
        const {bonusPrice} = price;
        let periodEl;

        if (period) {
            periodEl = (
                <span>
                    /<span className="rc-catalog-simple-price__period">{period}</span>
                </span>
            );
        }

        return (
            <div className="rc-catalog-simple-price__price" data-test-automation-id="price">
                {bonusPrice}
                {periodEl}
            </div>
        );
    }

    renderPriceLineOne() {
        const {pricePurchase, priceAnnual, priceMonthly, textPerMonth, textPerYear} = this.props;

        let price;
        let priceEl;

        if (pricePurchase) {
            price = pricePurchase;
            priceEl = this.renderPrice(pricePurchase);
        } else if (priceAnnual) {
            price = priceAnnual;
            priceEl = this.renderPrice(priceAnnual, textPerYear);
        } else if (priceMonthly) {
            price = priceMonthly;
            priceEl = this.renderPrice(priceMonthly, textPerMonth);
        } else {
            return null;
        }

        return (
            <React.Fragment>
                <div className="rc-catalog-simple-price__line">
                    {this.renderFrom()}
                    {priceEl}
                </div>
                {this.renderDiscount(price)}
            </React.Fragment>
        );
    }

    renderPriceLineTwo() {
        const {pricePurchase, priceAnnual, priceMonthly, textPerMonth, textPerYear} = this.props;

        let price;

        if (pricePurchase && (priceAnnual || priceMonthly)) {
            if (priceAnnual) {
                price = this.renderPrice(priceAnnual, textPerYear);
            } else if (priceMonthly) {
                price = this.renderPrice(priceMonthly, textPerMonth);
            }
        } else if (priceAnnual && priceMonthly) {
            price = this.renderPrice(priceMonthly, textPerMonth);
        } else {
            return null;
        }

        return (
            <div className="rc-catalog-simple-price__line rc-catalog-simple-price__line--secondary">
                {this.renderOr()}
                {price}
            </div>
        );
    }

    render() {
        const {testAutomationId, isCentered, isAlignRight} = this.props;

        const className = classnames('rc-catalog-simple-price', {
            'rc-catalog-simple-price--centered': isCentered,
            'rc-catalog-simple-price--right': isAlignRight
        });

        return (
            <div className={className} data-test-automation-id={testAutomationId}>
                {this.renderPriceLineOne()}
                {this.renderPriceLineTwo()}
            </div>
        );
    }
}
