import React from 'react';

import { ActivityIndicator, Info, ErrorInfo as ErrorInfoComponent, ToolbarButton } from 'lib/components';


import { injectIntl } from 'react-intl';
import icons from 'constants/icons';
import messages from './messages';


export default injectIntl((props) => {
    let { 
        fresh, 
        className, 
        size = "big", 
        status, 
        error, 
        empty,
        buttons,
        errorButtons,
        onRefresh,

        intl,
        mainLabel = intl.formatMessage(messages.emptyListMain),
        secondaryLabel = intl.formatMessage(messages.emptyListSecondary),
        errorMainLabel = intl.formatMessage(messages.errorMain),
        errorSecondaryLabel = intl.formatMessage(messages.errorSecondary),
    } = props;


    if (fresh) {
        return (
            <div className={ `relative ${className||""} ` } style={ { minHeight: 300 } }>
                <ActivityIndicator show={ status == "pending" } size={ size } />
            </div>
        );
    }

    if (error) {
        return (
            <div className={ `relative ${className||""}` }>
                <ErrorInfo 
                    icon={ icons.error} 
                    main={ errorMainLabel }
                    secondary={ errorSecondaryLabel }
                    buttons={ errorButtons }
                    onRefresh={ onRefresh }
                    size={ size }
                    />
                <ActivityIndicator show={ status == "pending" } size={ size } type="overlay" />
            </div>
        );
    }

    if (empty) {
        return (
            <div className={ `relative ${className||""}` }>
                <Info 
                    icon={ icons.empty }
                    main={ mainLabel }
                    secondary={ secondaryLabel }
                    buttons={ buttons }
                    size={ size }
                    minHeight
                    />
                <ActivityIndicator show={ status == "pending" } size={ size } type="overlay" />
            </div>
        );
    }

    return (
        <div className={ `relative ${className||""}` }>
            { props.children }
            <ActivityIndicator show={ status == "pending" } size={ size } type="overlay" />
        </div>
    );
});


export const ErrorInfo = injectIntl((props) => {
    let { 
        fresh, 
        className, 
        size = "big", 
        status, 
        error, 
        empty,
        buttons,
        errorButtons,
        onRefresh,

        intl,
        mainLabel = intl.formatMessage(messages.emptyListMain),
        secondaryLabel = intl.formatMessage(messages.emptyListSecondary),
        errorMainLabel = intl.formatMessage(messages.errorMain),
        errorSecondaryLabel = intl.formatMessage(messages.errorSecondary),
    } = props;

    if (!errorButtons && onRefresh) {
        errorButtons = (
            <ToolbarButton label={ intl.formatMessage(messages.errorTryAgainButton) } onClick={ onRefresh }>
                <span className="icon">{ icons.refresh }</span>
            </ToolbarButton>
        )
    }


    return <ErrorInfoComponent 
                icon={ icons.error} 
                main={ errorMainLabel }
                secondary={ errorSecondaryLabel }
                buttons={ errorButtons }
                size={ size }
                />


});