import { shallow } from 'enzyme';
import { useIntl } from 'react-intl';

import Chevron from '../../chevron';
import { mockMatchMedia } from '../../test-utils';

import DateHeader from '.';

mockMatchMedia();
jest.mock('react-intl');
jest.mock('../DateLookup.messages', () => ({
  previous: {
    id: 'neptune.DateLookup.previous',
    defaultMessage: 'previous',
  },
  next: {
    id: 'neptune.DateLookup.next',
    defaultMessage: 'next',
  },
  goTo20YearView: {
    id: 'neptune.DateLookup.goTo20YearView',
    defaultMessage: 'go to 20 year view',
  },
}));
describe('DateHeader', () => {
  let component;
  let props;

  beforeEach(() => {
    useIntl.mockReturnValue({
      locale: 'en-GB',
      formatMessage: (message) => message.defaultMessage,
      defineMessages: (translations) => translations,
    });
    props = {
      onPreviousClick: jest.fn(),
      onNextClick: jest.fn(),
      dateMode: 'year',
    };
    component = shallow(<DateHeader {...props} />);
  });

  it('shows previous and next buttons', () => {
    const chevrons = component.find(Chevron);
    expect(chevrons).toHaveLength(2);
  });

  it('does not show label and middle button by default', () => {
    expect(component.find('button')).toHaveLength(2);
    expect(component.find('tw-date-lookup-header-current')).toHaveLength(0);
  });

  it('calls previous button handler on previous click', () => {
    component.find('button').at(0).simulate('click');
    expect(props.onPreviousClick).toHaveBeenCalledTimes(1);
  });

  it('calls next button handler on next click', () => {
    component.find('button').at(1).simulate('click');
    expect(props.onNextClick).toHaveBeenCalledTimes(1);
  });

  it('has aria-label on previous button', () => {
    let previous = component.find('button').at(0);
    expect(previous.prop('aria-label')).toBe('previous year');
  });

  it('has aria-label on next button', () => {
    let previous = component.find('button').at(1);
    expect(previous.prop('aria-label')).toBe('next year');
  });

  describe('when label is provided', () => {
    beforeEach(() => {
      component.setProps({ label: 'trolo' });
      useIntl.mockReturnValue({
        locale: 'en-GB',
        formatMessage: (message) => message,
        defineMessages: (translations) => translations,
      });
    });

    it('shows the label', () => {
      expect(component.find('button')).toHaveLength(3);
      expect(component.find('.tw-date-lookup-header-current').text()).toBe('trolo');
    });

    it('calls label click handler on label click', () => {
      const onLabelClick = jest.fn();
      component.setProps({ onLabelClick });
      component.find('.tw-date-lookup-header-current').simulate('click');
      expect(onLabelClick).toHaveBeenCalledTimes(1);
    });
  });
});
