import React from 'react';
import classnames from 'classnames';
import lang from '../../../lang/common/index-en_US';

type Price = {
    price: string;
    bonusPrice: string | null;
    discountValue: string;
};

type CatalogPriceProps = {
    pricePurchase: Price;
    priceAnnual: Price;
    priceMonthly: Price;
    isPriceFrom: boolean;
    shouldPreserveFromPadding: boolean;
    isCentered: boolean;
    isAlignRight: boolean;
    testAutomationId: string;
    textFrom: string;
    textOr: string;
    textPerMonth: string;
    textPerYear: string;
    textOff: string;
    textFree: string;
    inheritFontSize: boolean;
    hideCaptions: boolean;
};

export class CatalogPrice extends React.PureComponent<CatalogPriceProps> {
    static defaultProps = {
        pricePurchase: null,
        priceAnnual: null,
        priceMonthly: null,
        priceOneTime: null,
        isPriceFrom: false,
        shouldPreserveFromPadding: false,
        isCentered: false,
        isAlignRight: false,
        testAutomationId: 'catalogItemPrice',
        inheritFontSize: false,
        hideCaptions: false,
        get textFrom() {
            return lang.FROM;
        },
        get textOr() {
            return lang.OR;
        },
        get textPerMonth() {
            return lang.MONTH;
        },
        get textPerYear() {
            return lang.YEAR;
        },
        get textOff() {
            return lang.OFF;
        },
        get textFree() {
            return lang.FREE;
        }
    };

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

        if (hideCaptions || (!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 : '';

        return this.renderPrefix(text);
    }

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

        return this.renderPrefix(textOr);
    }

    renderDiscount({price, 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: Price, period?: string) {
        const {bonusPrice} = price;

        let periodDescriptorNode: React.ReactNode = null;
        let priceNode: React.ReactNode = null;

        if (bonusPrice) {
            priceNode = bonusPrice;
        } else {
            const {textFree} = this.props;

            priceNode = textFree;
        }

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

        return (
            <div className="rc-catalog-simple-price__price" data-test-automation-id="price">
                {priceNode}
                {periodDescriptorNode}
            </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, inheritFontSize} = this.props;

        const className = classnames('rc-catalog-simple-price', {
            'rc-catalog-simple-price--inheritFontSize': inheritFontSize,
            '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>
        );
    }
}
