import React from 'react';
import { mount } from 'enzyme';
import LimitIndicator from '../../MultiEmailSelect/LimitIndicator';

describe('MultiEmailSelect LimitIndicator', () => {
  let component;
  const mockGetValue = jest.fn();

  it('matches a snapshot', () => {
    mockGetValue.mockReturnValue([
      { value: 'tt@doodle.com', label: 'Timo Timber' },
      { value: 'tay@doodle.com', label: 'Tayo Awoyemi' },
      { value: 'st@stan.com', label: 'Stan Theman' },
      { value: 'zh@doodle.com', label: 'Zari fari' },
      { value: 'mms@doodle.com', label: 'Mima Salu' },
      { value: 'kl@doodle.com', label: 'Klaus Larifari' },
      { value: 'opef@doodle.com', label: 'Opaloda Ottoddf' },
      { value: 'opfe@doodle.com', label: 'Opaidap Ottod' },
    ]);
    const selectProps = {
      emailsLimit: 10,
    };
    component = mount(<LimitIndicator getValue={mockGetValue} selectProps={selectProps} />);
    expect(component.getElement()).toMatchSnapshot();
  });

  it('it renders the indicator if the threshold is reached', () => {
    mockGetValue.mockReturnValue([
      { value: 'tt@doodle.com', label: 'Timo Timber' },
      { value: 'tay@doodle.com', label: 'Tayo Awoyemi' },
      { value: 'st@stan.com', label: 'Stan Theman' },
    ]);

    const selectProps = {
      emailsLimit: 2,
    };
    component = mount(<LimitIndicator getValue={mockGetValue} selectProps={selectProps} />);
    expect(component.find('.MultiEmailSelect__limit-indicator').exists()).toBeTruthy();
  });
  it('it does not render the indicator if the threshold is not reached', () => {
    mockGetValue.mockReturnValue([
      { value: 'tt@doodle.com', label: 'Timo Timber' },
      { value: 'tay@doodle.com', label: 'Tayo Awoyemi' },
      { value: 'st@stan.com', label: 'Stan Theman' },
      { value: 'zh@doodle.com', label: 'Zari fari' },
      { value: 'mms@doodle.com', label: 'Mima Salu' },
      { value: 'kl@doodle.com', label: 'Klaus Larifari' },
      { value: 'opef@doodle.com', label: 'Opaloda Ottoddf' },
      { value: 'opfe@doodle.com', label: 'Opaidap Ottod' },
    ]);

    const selectProps = {
      emailsLimit: 100,
    };
    component = mount(<LimitIndicator getValue={mockGetValue} selectProps={selectProps} />);
    expect(component.find('.MultiEmailSelect__limit-indicator').exists()).toBeFalsy();
  });

  describe('LimitIndicator should not count invalid emails', () => {
    it('should not render if values are all invalid', () => {
      mockGetValue.mockReturnValue([
        { value: 'invalid', label: 'invalid' },
        { value: 'email', label: 'email' },
        { value: 'rick sanchez', label: 'rick sanchez' },
      ]);
      const selectProps = {
        emailsLimit: 1,
      };
      component = mount(<LimitIndicator getValue={mockGetValue} selectProps={selectProps} />);
      expect(component.find('.MultiEmailSelect__limit-indicator').exists()).toBeFalsy();
    });
    it('should only count valid emails', () => {
      mockGetValue.mockReturnValue([
        { value: 'invalid', label: 'invalid' },
        { value: 'email', label: 'email' },
        { value: 'rick sanchez', label: 'rick sanchez' },
        { value: 'valid@email.com', label: 'valid email' },
      ]);
      const selectProps = {
        emailsLimit: 2,
      };
      component = mount(<LimitIndicator getValue={mockGetValue} selectProps={selectProps} />);
      expect(component.find('.MultiEmailSelect__limit-indicator').exists()).toBeFalsy();
    });
  });
});