import React from 'react';
import PropTypes from 'prop-types';
import lang from '../../../../lang/common/index-en_US';

export type CommonListProps = {
    isBlocked?: boolean;
    noResultsText?: string | React.ReactNode;
    blockedText?: string;
    emptyListText?: string;
} & Partial<CommonListDefaultProps>;

export type CommonListDefaultProps = {
    isBlocked: boolean;
    noResultsText: string | React.ReactNode;
    blockedText: string;
    emptyListText: string;
};

export abstract class CommonList<P, S> extends React.Component<CommonListProps & P, S> {
    static defaultProps = {
        isBlocked: false,
        emptyListText: null,
        get noResultsText() {
            return lang.NO_RESULTS;
        },
        get blockedText() {
            return lang.PLEASE_WAIT_WHILE_LOADING;
        }
    };

    static propTypes = {
        isBlocked: PropTypes.bool,
        emptyListText: PropTypes.node,
        noResultsText: PropTypes.node,
        blockedText: PropTypes.string
    };

    rowClickHandler(fn: Function): (Event) => void {
        return event => {
            let isInsideStopper = false;
            let currentNode = event.target;
            let rootNode = event.currentTarget;
            let stopperAttribute;

            while (currentNode && currentNode !== rootNode) {
                stopperAttribute = currentNode.dataset
                    ? currentNode.dataset.stopRowClick
                    : currentNode.getAttribute('data-stop-row-click'); // for IE <= 10

                isInsideStopper = String(stopperAttribute).toLowerCase() === 'true';
                if (isInsideStopper) {
                    break;
                } else {
                    currentNode = currentNode.parentNode;
                }
            }

            if (isInsideStopper) {
                event.stopPropagation();
            } else {
                fn(event);
            }
        };
    }

    renderEmpty(): CommonListDefaultProps['noResultsText'] {
        return this.props.noResultsText;
    }

    isEmptyListMessageVisible(): any {}
    hasItems(): any {}
    renderItems(): any {}
    isEmptyList(): any {}

    renderEmptyListMessage(): CommonListDefaultProps['noResultsText'] | void {
        if (!this.isEmptyListMessageVisible()) {
            return null;
        }

        const {emptyListText, noResultsText} = this.props;

        if (emptyListText && this.isEmptyList()) {
            return (
                <div className="grid-empty-list-message" data-test-automation-id="emptyListMessage">
                    {emptyListText}
                </div>
            );
        }

        return (
            <div className="grid-empty-list-message" data-test-automation-id="noResultsMessage">
                {noResultsText}
            </div>
        );
    }

    renderBlockedMessage(): CommonListDefaultProps['blockedText'] | void | any {
        if (this.props.isBlocked) {
            return (
                <div className="grid-blocked-list-container">
                    <div className="grid-blocked-list-message">{this.props.blockedText}</div>
                </div>
            );
        }
    }

    renderItem(item, index: number, array): any {
        throw new Error('Overwrite renderItem method to use List');
    }

    render() {
        return this.hasItems() ? this.renderItems() : this.renderEmpty();
    }
}
