import React from 'react';
import classnames from 'classnames';

type NotificationCounterProps = {
    value: number;
    className: string;
    testAutomationId: string;
    max: number;
    formatMaxNumber: (number) => string;
};

const formatMaxNumber = max => `${max}+`;

export class NotificationCounter extends React.Component<NotificationCounterProps> {
    static defaultProps = {
        testAutomationId: 'notificationCounter',
        formatMaxNumber,
        max: null,
        className: null
    };

    renderValue(): string {
        const {max, value, formatMaxNumber} = this.props;

        if (max && value > max) {
            return formatMaxNumber(max);
        }

        return value.toString(10);
    }

    render() {
        let {testAutomationId, children, className} = this.props;

        return (
            <div
                data-test-automation-id={testAutomationId}
                className={classnames('rc-notification-counter', className)}>
                {children}
                <div data-test-automation-id="value" className="rc-notification-counter__value">
                    {this.renderValue()}
                </div>
            </div>
        );
    }
}
