import React from 'react';
import PropTypes from 'prop-types';
import {isFunction} from 'lodash';
import {Collapse} from 'react-bootstrap';

import {filterKeyCodes, stripTags} from '../../utils/functions';

import {CatalogItemIcon} from './CatalogItemIcon';
import {CatalogSimplePrice} from './CatalogSimplePrice';
import {Icon} from '../Icon';

export class CatalogListItem extends React.PureComponent {
    static propTypes = {
        name: PropTypes.string.isRequired,
        description: PropTypes.string,
        icon: PropTypes.node,
        color: PropTypes.string,
        image: PropTypes.string,
        price: PropTypes.shape({
            pricePurchase: PropTypes.object,
            priceAnnual: PropTypes.object,
            priceMonthly: PropTypes.object,
            isPriceFrom: PropTypes.bool
        }),
        isExpanded: PropTypes.bool,
        onClick: PropTypes.func,
        testAutomationId: PropTypes.string
    };

    static defaultProps = {
        description: null,
        icon: null,
        color: null,
        image: null,
        price: null,
        isExpanded: false,
        onClick: null,
        testAutomationId: 'catalogListItem'
    };

    handleClick = () => {
        const {onClick} = this.props;

        if (isFunction(onClick)) {
            onClick();
        }
    };

    handleKeyPress = filterKeyCodes(this.handleClick);

    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">
                {stripTags(description)}
            </div>
        );
    }

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

        if (!price) {
            return null;
        }

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

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

    renderArrow() {
        const {children, isExpanded} = this.props;
        let arrow = 'chevron-right-big';

        if (children) {
            if (isExpanded) {
                arrow = 'chevron-up-big';
            } else {
                arrow = 'chevron-down-big';
            }
        }

        return (
            <div className="rc-catalog-list-item__arrow">
                <Icon name={arrow} testAutomationId="arrow" />
            </div>
        );
    }

    renderChildren() {
        const {children, isExpanded} = this.props;

        if (!children || !isExpanded) {
            return null;
        }

        return (
            <Collapse in={isExpanded} data-test-automation-id="children">
                <div className="rc-catalog-list-item__children">{children}</div>
            </Collapse>
        );
    }

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

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

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

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

        return (
            <div className="rc-catalog-list-item" data-test-automation-id={testAutomationId}>
                <div
                    data-test-automation-id="header"
                    className="rc-catalog-list-item__header"
                    tabIndex={0}
                    role="button"
                    title={name}
                    onClick={this.handleClick}
                    onKeyDown={this.handleKeyPress}>
                    <div className="rc-catalog-list-item__main">
                        <div className="rc-catalog-list-item__icon">{this.renderIcon()}</div>
                        <div className="rc-catalog-list-item__content">
                            <div
                                className="rc-catalog-list-item__text rc-catalog-list-item__name"
                                data-test-automation-id="name">
                                {name}
                            </div>
                            {this.renderDescription()}
                        </div>
                    </div>
                    <div className="rc-catalog-list-item__price-container">
                        {this.renderPrice()}
                    </div>
                    {this.renderArrow()}
                </div>
                {this.renderChildren()}
            </div>
        );
    }
}
