import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import './styles.scss';

class TextMaxLength extends PureComponent {
    render() {
        if (!this.props.maxLength) {
            return null;
        }

        const currentLength = this.props.maxLength - this.props.value.toString().trim().length;
        const className = `TextMaxLength ${currentLength < 0 && 'TextMaxLength_error'}`;
        return (
            <div className={className}>
                {currentLength}
            </div>
        );
    }
}

TextMaxLength.propTypes = {
    maxLength: PropTypes.number.isRequired,
    value: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.number,
    ]).isRequired,
};

export default TextMaxLength;