import React from 'react';
import { mount } from 'enzyme';
import { DateUtils } from 'mailspring-exports';
import { DatePickerPopover } from 'mailspring-component-kit';

const makePopover = (props = {}) => {
  return mount(
    <DatePickerPopover
      dateOptions={{}}
      header={<span className="header">my header</span>}
      onSelectDate={() => {}}
      {...props}
    />
  );
};

describe('DatePickerPopover', function sendLaterPopover() {
  beforeEach(() => {
    spyOn(DateUtils, 'format').andReturn('formatted');
  });

  describe('selectDate', () => {
    it('calls props.onSelectDate', () => {
      const onSelectDate = jasmine.createSpy('onSelectDate');
      const popover = makePopover({ onSelectDate });
      const fakeDate = new Date();
      popover.instance().selectDate(fakeDate, 'Custom');
      expect(onSelectDate).toHaveBeenCalledWith(fakeDate, 'Custom');
    });
  });

  describe('onSelectMenuOption', () => {});

  describe('onCustomDateSelected', () => {
    it('selects date', () => {
      const popover = makePopover();
      const instance = popover.instance();
      spyOn(instance, 'selectDate');
      const fakeDate = new Date();
      instance.onCustomDateSelected(fakeDate, 'abc');
      expect(instance.selectDate).toHaveBeenCalledWith(fakeDate, 'Custom');
    });

    it('throws error if date is invalid', () => {
      spyOn(AppEnv, 'showErrorDialog');
      const popover = makePopover();
      popover.instance().onCustomDateSelected(null, 'abc');
      expect(AppEnv.showErrorDialog).toHaveBeenCalled();
    });
  });

  describe('render', () => {
    it('renders the provided dateOptions', () => {
      const popover = makePopover({
        dateOptions: {
          'label 1-': () => {},
          'label 2-': () => {},
        },
      });
      const items = popover.find('.item');
      expect(items.at(0).text()).toEqual('label 1-formatted');
      expect(items.at(1).text()).toEqual('label 2-formatted');
    });

    it('renders header components', () => {
      const popover = makePopover();
      expect(popover.find('.header').text()).toEqual('my header');
    });

    it('renders footer components', () => {
      const popover = makePopover({
        footer: (
          <span key="footer" className="footer">
            footer
          </span>
        ),
      });
      expect(popover.find('.footer').text()).toEqual('footer');
      expect(popover.find('.date-input-section').exists()).toBe(true);
    });
  });
});