import * as React from 'react';

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

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

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

type CatalogListDetailsProps = {
    description: string | React.ReactNode;
    action: (event: React.MouseEvent<Button, MouseEvent>) => void;
    testAutomationId: string;
    title: string;
    textDetails: string;
    textPurchase: string;
    shouldScrollIntoView: boolean;
    isActionDisabled: boolean;
    isLoading: boolean;
    renderRightDetails: React.ReactNode;
    alert: React.ReactNode;
    warning: React.ReactNode;
    narrow: boolean;
};

export class CatalogListDetails extends React.PureComponent<CatalogListDetailsProps> {
    static defaultProps = {
        testAutomationId: 'catalogListDetails',
        action: null,
        get textDetails() {
            return lang.DETAILS;
        },
        get textPurchase() {
            return lang.PURCHASE;
        },
        title: null,
        shouldScrollIntoView: false,
        isActionDisabled: false,
        isLoading: false,
        isDisabled: false,
        alert: null,
        warning: null,
        narrow: false
    };

    private ref: any;

    getNodeRef = element => {
        if (this.ref !== element && element) {
            const {shouldScrollIntoView} = this.props;

            if (shouldScrollIntoView) {
                scrollElementIntoView(element);
            }
        }

        this.ref = element;
    };

    renderRightDetails() {
        const {renderRightDetails} = this.props;

        return renderRightDetails || null;
    }

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

        if (!action) {
            return null;
        }

        const isDisabled = isLoading || isActionDisabled || typeof action !== 'function';
        const loadingSpinnerNode = isLoading ? <Spinner size={18} /> : null;

        return (
            <div className="rc-catalog-list-details__actions text-right">
                <FlexBlock align={FlexBlock.CENTER} justify={FlexBlock.END} gutterWidth={10}>
                    {loadingSpinnerNode}
                    <Button
                        bsStyle="primary"
                        onClick={action}
                        testAutomationId="catalogListDetailsButton"
                        disabled={isDisabled}>
                        {textPurchase}
                    </Button>
                </FlexBlock>
            </div>
        );
    }

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

        if (!alert) {
            return null;
        }

        return (
            <Block addHorizontalOffset cancelBottomOffset>
                {alert}
            </Block>
        );
    }

    renderWarning() {
        const {warning} = this.props;

        if (!warning) {
            return null;
        }

        return (
            <Block addTopOffset cancelBottomOffset>
                {warning}
            </Block>
        );
    }

    renderTitle() {
        const {title} = this.props;

        if (!title) {
            return null;
        }

        return (
            <div className="rc-catalog-list-details__titlebar" data-test-automation-id="header">
                {title}
            </div>
        );
    }

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

        let {description, narrow} = this.props;

        if (typeof description === 'string') {
            description = <DangerousHTML>{description}</DangerousHTML>;
        }

        const className = classnames('rc-catalog-list-details', {narrow});

        return (
            <section
                ref={this.getNodeRef}
                className={className}
                data-test-automation-id={testAutomationId}>
                <div className="rc-catalog-list-details__content">
                    {this.renderTitle()}
                    <div className="rc-catalog-list-details__description-container">
                        <FlexBlock
                            direction={FlexBlock.COLUMN}
                            align={FlexBlock.START}
                            justify={FlexBlock.SPACE_BETWEEN}
                            className="rc-catalog-list-details__description-wrap">
                            <div className="rc-catalog-list-details__description-heading-wrap">
                                <div className="rc-catalog-list-details__description-heading">
                                    {textDetails}
                                </div>
                                <div
                                    className="rc-catalog-list-details__description"
                                    data-test-automation-id="catalogListDetailsDescription">
                                    {description}
                                </div>
                            </div>
                            {this.renderWarning()}
                        </FlexBlock>
                    </div>
                    <div className="rc-catalog-list-details__right">
                        {this.renderRightDetails()}
                        {this.renderAlert()}
                    </div>
                </div>
                {this.renderActionButton()}
            </section>
        );
    }
}
