import React from 'react';
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import Sinon from 'sinon';
import { FilterCalendarWithPreMenu } from '../src/FilterCalendarWithPreMenu/FilterCalendarWithPreMenu';
import styles from '../src/Filters.scss';

Enzyme.configure({ adapter: new Adapter() });

const filter = {
  endpoint: '/filterM',
  key: 'date_picker_with_pre_menu',
  value: 'Date picker with pre-menu',
  type: 'calendarWithPreMenu',
  type_options: {
    preMenu: [
      {
        key: 'noDueDate',
        value: 'No Due Date'
      },
      {
        key: 'overdue',
        value: 'Overdue'
      },
      {
        key: 'calendar',
        type: 'calendar',
        value: 'Select Day or Range'
      }
    ]
  }
};

const committedDateRange = ['2017-09-05T07:00:00Z', '2017-09-20T07:00:00Z'];
const committedSingleDay = ['2017-09-05T07:00:00Z'];

const I18nText = 'I18n Translation Text';
const I18nObj = { t: () => I18nText, locale: 'en' };

const shallowRender = (props = {}) => {
  const mergedProps = Object.assign({}, {
    currentIndex: -1,
    filter,
    I18n: I18nObj,
    keyListeners: () => {},
    onRemove: () => {},
    selected: [],
    isRange: null,
    onSave: () => {},
    removeFilter: () => {},
    styles
  }, props);

  return Enzyme.shallow(
    <FilterCalendarWithPreMenu {...mergedProps} />
  );
};

describe('FilterCalendarWithPreMenu', () => {
  it('renders the selected date range in the filter token', () => {
    const wrapper = shallowRender({
      selected: committedDateRange
    });
    const countElement = wrapper.find(`.${styles.tokenTitle__date}`);
    expect(countElement.text()).toBe('09/05/2017 - 09/20/2017');
  });

  it('renders the selected date in the filter token', () => {
    const wrapper = shallowRender({
      selected: committedSingleDay
    });
    const countElement = wrapper.find(`.${styles.tokenTitle__date}`);
    expect(countElement.text()).toBe('09/05/2017');
  });

  it('renders overdue', () => {
    const wrapper = shallowRender({
      selected: ['overdue']
    });
    const countElement = wrapper.find(`.${styles.tokenTitle__date}`);
    expect(countElement.text()).toBe('Overdue');
  });

  describe('on blur', () => {
    it('pre-menu is not expanded', () => {
      const wrapper = shallowRender({
        selected: committedDateRange
      });
      wrapper.setState({ preMenuExpanded: true });
      wrapper.instance().onBlur();
      expect(wrapper.state('preMenuExpanded')).toBe(false);
    });

    it('sends current filter and selected keys to save handler', () => {
      const onSave = Sinon.spy();
      const wrapper = shallowRender({
        onSave,
        selected: committedDateRange
      });
      wrapper.setState({
        preMenuExpanded: false,
        calendarIsExpanded: true,
        ignoreBlur: false
      });
      wrapper.instance().onBlur();
      expect(onSave.calledWithExactly(filter, committedDateRange, {})).toBe(true);
    });
  });

  it('sends current value to save handler', () => {
    const onSave = Sinon.spy();
    const selected = ['overdue'];
    const clickedItem = {
      key: 'overdue',
      value: 'Overdue'
    };
    const wrapper = shallowRender({ onSave });
    wrapper.setState({
      preMenuExpanded: true,
      calendarIsExpanded: false,
      ignoreBlur: false
    });
    wrapper.instance().onListItemClick(clickedItem);
    expect(onSave.calledWithExactly(filter, ['overdue'], {})).toBe(true);
  });
});