import React, { Component } from 'react';
import PropTypes from 'prop-types';

const THRESHOLD_PERCENTAGE = 0.9;

class LimitIndicator extends Component {
  static propTypes = {
    selectProps: PropTypes.object.isRequired,
    getValue: PropTypes.func.isRequired,
  };

  isEmailsLimitThreshold = () => {
    const emailsLength = this.props.getValue().length;
    return emailsLength / this.props.selectProps.emailsLimit >= THRESHOLD_PERCENTAGE;
  };

  render() {
    const { selectProps, getValue } = this.props;
    const emailsLength = getValue().length;
    const emailsLimitThreshold = this.isEmailsLimitThreshold();
    return (
      emailsLimitThreshold && (
        <div className="MultiEmailSelect__limit-indicator">{`${emailsLength}/${selectProps.emailsLimit}`}</div>
      )
    );
  }
}

export default LimitIndicator;