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

import {CatalogItemIcon} from './CatalogItemIcon';
import {CatalogSimplePrice} from './CatalogSimplePrice';
import {Spinner} from '../Spinner/Spinner';
import {Highlighter} from '../Highlighter';

export class CatalogSearchResultItem extends React.PureComponent {
    static propTypes = {
        name: PropTypes.string.isRequired,
        description: PropTypes.string,
        price: PropTypes.object,
        icon: PropTypes.node,
        color: PropTypes.string,
        isLoading: PropTypes.bool,
        query: PropTypes.string,
        testAutomationId: PropTypes.string
    };

    static defaultProps = {
        description: null,
        price: null,
        icon: null,
        color: null,
        isLoading: false,
        query: '',
        testAutomationId: 'catalogSearchResultItem'
    };

    getQueryRegex = () => {
        const {query} = this.props;

        return !!query ? new RegExp(query, 'i') : null;
    };

    renderIcon() {
        const {icon, color} = this.props;

        if (React.isValidElement(icon)) {
            return icon;
        }

        return <CatalogItemIcon isRound size={40} iconName={icon} backgroundColor={color} />;
    }

    renderPrice() {
        const {price, isLoading} = this.props;

        if (isLoading) {
            return <Spinner size={18} />;
        }

        if (!price) {
            return null;
        }

        const {pricePurchase, priceAnnual, priceMonthly, isPriceFrom} = price;

        return (
            <CatalogSimplePrice
                isAlignRight
                shouldPreserveFromPadding
                pricePurchase={pricePurchase}
                priceAnnual={priceAnnual}
                priceMonthly={priceMonthly}
                isPriceFrom={isPriceFrom}
            />
        );
    }

    renderDescription() {
        const {description} = this.props;

        if (!description) {
            return null;
        }

        return (
            <div
                className="rc-catalog-list-item__text rc-catalog-list-item__description"
                data-test-automation-id="description">
                <Highlighter highlightRegexp={this.getQueryRegex()}>{description}</Highlighter>
            </div>
        );
    }

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

        return (
            <div
                className="rc-catalog-search-result-item"
                data-test-automation-id={testAutomationId}>
                <div className="rc-catalog-search-result-item__side-content">
                    {this.renderIcon()}
                </div>
                <div className="rc-catalog-search-result-item__content">
                    <div
                        className="rc-catalog-list-item__text rc-catalog-list-item__name"
                        data-test-automation-id="name">
                        <Highlighter highlightRegexp={this.getQueryRegex()}>{name}</Highlighter>
                    </div>
                    {this.renderDescription()}
                </div>
                <div className="rc-catalog-search-result-item__side-content">
                    {this.renderPrice()}
                </div>
            </div>
        );
    }
}
