import React from 'react';
import PropTypes from 'prop-types';
import {Alert} from 'react-bootstrap';

import {scrollEelementIntoView} from '../../utils/functions';

import {DangerousHTML} from '../DangerousHTML';
import {Block} from '../Block';
import {Button} from '../Button';
import {Spinner} from '../Spinner';
import {FlexBlock} from '../flexBlock';

import {CatalogSimplePrice} from './CatalogSimplePrice';

import lang from '../../../lang/common/index-en_US';

export class CatalogListDetails extends React.PureComponent<any> {
    static propTypes = {
        description: PropTypes.string.isRequired,
        action: PropTypes.func,
        testAutomationId: PropTypes.string,
        textDetails: PropTypes.string,
        textPurchase: PropTypes.string,
        price: PropTypes.shape({
            pricePurchase: PropTypes.object,
            priceAnnual: PropTypes.object,
            priceMonthly: PropTypes.object,
            isPriceFrom: PropTypes.bool
        }).isRequired,
        shouldScrollIntoView: PropTypes.bool,
        alertMessage: PropTypes.string,
        isActionDisabled: PropTypes.bool,
        isLoading: PropTypes.bool
    };

    static defaultProps = {
        testAutomationId: 'catalogListDetails',
        action: null,
        get textDetails() {
            return lang.DETAILS;
        },
        get textPurchase() {
            return lang.PURCHASE;
        },
        shouldScrollIntoView: false,
        alertMessage: null,
        isActionDisabled: false,
        isLoading: false,
        isDisabled: false
    };

    componentDidMount() {
        const {shouldScrollIntoView} = this.props;

        if (shouldScrollIntoView) {
            scrollEelementIntoView(this.ref.current);
        }
    }

    ref = React.createRef();

    renderAlert() {
        const {alertMessage} = this.props;

        if (!alertMessage) {
            return null;
        }

        return (
            <Block addTopOffset addHorizontalOffset cancelBottomOffset>
                <Alert bsStyle="warning" data-test-automation-id="alertMessage">
                    <DangerousHTML>{alertMessage}</DangerousHTML>
                </Alert>
            </Block>
        );
    }

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

        if (!price) {
            return null;
        }

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

        return (
            <div className="rc-catalog-list-details__price-container">
                <CatalogSimplePrice
                    shouldPreserveFromPadding
                    pricePurchase={pricePurchase}
                    priceAnnual={priceAnnual}
                    priceMonthly={priceMonthly}
                    isPriceFrom={isPriceFrom}
                />
            </div>
        );
    }

    renderActionButton() {
        const {action, textPurchase, isLoading, isActionDisabled} = this.props;

        const isDisabled = isLoading || isActionDisabled || typeof action !== 'function';

        const loadingSpinner = isLoading ? <Spinner size={18} /> : null;

        return (
            <FlexBlock align={FlexBlock.CENTER} justify={FlexBlock.END} gutterWidth={10}>
                {loadingSpinner}
                <Button
                    bsStyle="primary"
                    onClick={action}
                    testAutomationId="catalogListDetailsButton"
                    disabled={isDisabled}>
                    {textPurchase}
                </Button>
            </FlexBlock>
        );
    }

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

        return (
            <section
                ref={this.ref as any}
                className="rc-catalog-list-details"
                data-test-automation-id={testAutomationId}>
                <div className="rc-catalog-list-details__content">
                    <div className="rc-catalog-list-details__description-container">
                        <div className="rc-catalog-list-details__description-heading">
                            {textDetails}
                        </div>
                        <div
                            className="rc-catalog-list-details__description"
                            data-test-automation-id="catalogListDetailsDescription">
                            <DangerousHTML>{description}</DangerousHTML>
                        </div>
                    </div>
                    <div className="rc-catalog-list-details__right">
                        {this.renderPrice()}
                        {this.renderAlert()}
                    </div>
                </div>
                <div className="rc-catalog-list-details__actions text-right">
                    {this.renderActionButton()}
                </div>
            </section>
        );
    }
}
