// @flow
import React from 'react';
import { mountWrappedComponent } from '../../../../utils/tests';
import { FieldLabel } from '../../typography';
import { SearchInputField } from './search-input-field.component';
import { StyledCloseButtonContainer } from './icons';

describe('SearchInputField', () => {
  const DEFAULT_PROPS = {
    value: '',
    onChange: jest.fn(),
    placeholder: 'placeholder text',
    label: 'Some Label',
    hideLabel: false,
  };

  beforeEach(() => {
    jest.restoreAllMocks();
  });

  describe('enzyme testing', () => {
    it('renders basic search', () => {
      const onChange = jest.fn();
      const wrapper = mountWrappedComponent(
        <SearchInputField
          value=""
          onChange={onChange}
          placeholder="Some placeholder"
          label="Some Label"
        />,
      );

      expect(wrapper.find('SearchCloseIcon').length).toEqual(0);
      expect(wrapper.find('LeftStyledSearchIcon').length).toEqual(1);
      expect(wrapper.find('input').first().props().value).toEqual('');

      expect(wrapper.find(FieldLabel).first().html()).toContain('Some Label');
    });

    it('renders with value', () => {
      const onChange = jest.fn();
      const wrapper = mountWrappedComponent(
        <SearchInputField
          value="some value"
          onChange={onChange}
          placeholder="Some placeholder"
          label="Some Label"
        />,
      );

      expect(wrapper.find('SearchCloseIcon').length).toEqual(1);
      expect(wrapper.find('LeftStyledSearchIcon').length).toEqual(0);
      expect(wrapper.find('RightStyledSearchIcon').length).toEqual(0);
      expect(wrapper.find('input').first().props().value).toEqual('some value');
    });

    it('renders without label', () => {
      const onChange = jest.fn();
      const wrapper = mountWrappedComponent(
        <SearchInputField
          value=""
          onChange={onChange}
          placeholder="Some placeholder"
          label="Some Label"
          hideLabel
        />,
      );

      expect(wrapper.find('HideAccessibly').length).toBe(1);
    });

    it('listens to onChange', () => {
      const onChange = jest.fn();
      const wrapper = mountWrappedComponent(
        <SearchInputField
          value=""
          onChange={onChange}
          placeholder="Some placeholder"
          label="Some Label"
        />,
      );
      const event = { target: { value: 'blah' } };
      wrapper.find('input').first().simulate('change', event);

      expect(onChange).toHaveBeenCalled();
    });

    it('clears when x button is pressed', () => {
      const onChange = jest.fn();
      const wrapper = mountWrappedComponent(
        <SearchInputField
          value="some value"
          onChange={onChange}
          placeholder="Some placeholder"
          label="Some Label"
        />,
      );
      wrapper.find('ClearInputButton').find('button').first().simulate('click');

      expect(onChange).toHaveBeenCalledWith('');
    });

    it('on focus set correct icon', () => {
      const onChange = jest.fn();
      let wrapper = mountWrappedComponent(
        <SearchInputField
          value=""
          onChange={onChange}
          placeholder="Some placeholder"
          label="Some Label"
        />,
      );
      const input = wrapper.find('input').first();

      expect(wrapper.find('LeftStyledSearchIcon').length).toEqual(1);
      expect(wrapper.find('RightStyledSearchIcon').length).toEqual(0);
      input.simulate('focus');

      wrapper = wrapper.update();

      expect(wrapper.find('LeftStyledSearchIcon').length).toEqual(0);
      expect(wrapper.find('RightStyledSearchIcon').length).toEqual(1);
      input.simulate('blur');
      wrapper = wrapper.update();

      expect(wrapper.find('LeftStyledSearchIcon').length).toEqual(1);
      expect(wrapper.find('RightStyledSearchIcon').length).toEqual(0);
    });
  });

  describe('when passing a clear label', () => {
    it('shows the custom clearLabel', () => {
      const wrapper = mountWrappedComponent(
        <SearchInputField
          {...DEFAULT_PROPS}
          value="test"
          clearLabel="Custom clear label"
        />,
      );

      const closeAriaLabel = wrapper
        .find(StyledCloseButtonContainer)
        .prop('aria-label');

      expect(closeAriaLabel).toEqual('Custom clear label');
    });
  });

  describe('when no clear label passed', () => {
    it('uses an english default aria label for the clear button', () => {
      const wrapper = mountWrappedComponent(
        <SearchInputField
          {...DEFAULT_PROPS}
          value="test"
          clearLabel={undefined}
        />,
      );

      const closeAriaLabel = wrapper
        .find(StyledCloseButtonContainer)
        .prop('aria-label');

      expect(closeAriaLabel).toEqual('Clear value');
    });
  });
});
