import classnames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';

import {DangerousHTML} from '../DangerousHTML';
import {translate} from '../../../utils/translate';
import lang from '../../../lang/common/index-en_US';

type CounterTextProps = {
    counter: number;
    template?: string;
    testAutomationId?: string;
    className?: string;
} & Partial<CounterTextPropsDefaultProps>;

type CounterTextPropsDefaultProps = {
    template: string;
    testAutomationId: string;
    className: string;
};

export class CounterText extends React.Component<CounterTextProps> {
    static propTypes = {
        counter: PropTypes.number.isRequired,
        template: PropTypes.string,
        testAutomationId: PropTypes.string,
        className: PropTypes.string
    };

    static defaultProps = {
        get template() {
            return lang.TOTAL_AMOUNT;
        },
        testAutomationId: 'storeCounterText',
        className: null
    };

    render() {
        const {template, counter: totalCount} = this.props;
        const className = classnames('rc-storeCounterText', this.props.className);
        return (
            <span data-test-automation-id={this.props.testAutomationId} className={className}>
                <DangerousHTML>{translate(template || '', {totalCount})}</DangerousHTML>
            </span>
        );
    }
}
