import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { isEmailValidForWhitelist, STRICT_EMAIL_REGEX } from '../../../utils/validation';

const THRESHOLD_PERCENTAGE = 0.9;

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

  getValidEmailsCount = () => {
    const { getValue } = this.props;
    const validEmails = getValue().filter(
      contact => isEmailValidForWhitelist(contact.value) && STRICT_EMAIL_REGEX.test(contact.value)
    );
    return validEmails.length;
  };

  isEmailsLimitThreshold = () => {
    const validEmailsLength = this.getValidEmailsCount();
    return validEmailsLength / this.props.selectProps.emailsLimit >= THRESHOLD_PERCENTAGE;
  };

  render() {
    const { selectProps } = this.props;

    const validEmailsLength = this.getValidEmailsCount();
    const emailsLimitThreshold = this.isEmailsLimitThreshold();
    return (
      emailsLimitThreshold && (
        <div className="MultiEmailSelect__limit-indicator">{`${validEmailsLength}/${selectProps.emailsLimit}`}</div>
      )
    );
  }
}

export default LimitIndicator;