import './index';
import { assert } from 'chai';
import { CalendarSk } from './calendar-sk';
import {
  setUpElementUnderTest,
  eventPromise,
} from '../../../infra-sk/modules/test_util';

const container = document.createElement('div');
document.body.appendChild(container);

afterEach(() => {
  container.innerHTML = '';
});

describe('calendar-sk', () => {
  const newInstance = setUpElementUnderTest<CalendarSk>('calendar-sk');
  let calendarSk: CalendarSk;
  beforeEach(() => {
    calendarSk = newInstance();
    calendarSk.displayDate = new Date(2020, 4, 21);
  });

  describe('event', () => {
    it('fires when button is clicked', () => window.customElements.whenDefined('calendar-sk').then(async () => {
      const event = eventPromise<CustomEvent<Date>>('change');
        calendarSk
          .querySelector<HTMLButtonElement>('button[data-date="19"]')!
          .click();

        const detail = (await event).detail;

        assert.equal(
          new Date(2020, 4, 19).toDateString(),
          detail.toDateString(),
          'Date has changed.',
        );
        assert.equal(getSelectedDate(), 19, 'Selected date has changed.');
    }));
  });
  describe('year', () => {
    it('decrements when button is clicked', () => window.customElements.whenDefined('calendar-sk').then(() => {
        calendarSk.querySelector<HTMLButtonElement>('#previous-year')!.click();

        const year = calendarSk.querySelector<HTMLHeadingElement>(
          '#calendar-year',
        )!.innerText;
        assert.equal(year, '2019', 'Year has changed.');
        assert.equal(getSelectedDate(), 21, 'Selected date has not changed.');
    }));
    it('increments when button is clicked', () => window.customElements.whenDefined('calendar-sk').then(() => {
        calendarSk.querySelector<HTMLButtonElement>('#next-year')!.click();

        const year = calendarSk.querySelector<HTMLHeadingElement>(
          '#calendar-year',
        )!.innerText;
        assert.equal(year, '2021', 'Year has changed.');
        assert.equal(getSelectedDate(), 21, 'Selected date has not changed.');
    }));
  });
  describe('month', () => {
    it('decrements when button is clicked', () => window.customElements.whenDefined('calendar-sk').then(() => {
        calendarSk.querySelector<HTMLButtonElement>('#previous-month')!.click();

        const year = calendarSk.querySelector<HTMLHeadingElement>(
          '#calendar-month',
        )!.innerText;
        assert.equal(year, 'April', 'Month has changed.');
        assert.equal(getSelectedDate(), 21, 'Selected date has not changed.');
    }));
    it('increments when button is clicked', () => window.customElements.whenDefined('calendar-sk').then(() => {
        calendarSk.querySelector<HTMLButtonElement>('#next-month')!.click();

        const year = calendarSk.querySelector<HTMLHeadingElement>(
          '#calendar-month',
        )!.innerText;
        assert.equal(year, 'June', 'Month has changed.');
        assert.equal(getSelectedDate(), 21, 'Selected date has not changed.');
    }));
  });
  describe('keyboard', () => {
    it('moves to next day when ArrowRight is pressed', () => window.customElements.whenDefined('calendar-sk').then(() => {
      calendarSk.keyboardHandler(
        new KeyboardEvent('keydown', { code: 'ArrowRight' }),
      );

      assert.equal(
        new Date(2020, 4, 22).toDateString(),
        calendarSk.displayDate.toDateString(),
        'Date has changed.',
      );
      assert.equal(getSelectedDate(), 22, 'Selected date has changed.');
    }));
    it('moves to previous day when ArrowLeft is pressed', () => window.customElements.whenDefined('calendar-sk').then(() => {
      calendarSk.keyboardHandler(
        new KeyboardEvent('keydown', { code: 'ArrowLeft' }),
      );

      assert.equal(
        new Date(2020, 4, 20).toDateString(),
        calendarSk.displayDate.toDateString(),
        'Date has changed.',
      );
      assert.equal(getSelectedDate(), 20, 'Selected date has changed.');
    }));
    it('moves to previous week when ArrowUp is pressed', () => window.customElements.whenDefined('calendar-sk').then(() => {
      calendarSk.keyboardHandler(
        new KeyboardEvent('keydown', { code: 'ArrowUp' }),
      );

      assert.equal(
        new Date(2020, 4, 14).toDateString(),
        calendarSk.displayDate.toDateString(),
        'Date has changed.',
      );
      assert.equal(getSelectedDate(), 14, 'Selected date has changed.');
    }));
    it('moves to next week when ArrowDown is pressed', () => window.customElements.whenDefined('calendar-sk').then(() => {
      calendarSk.keyboardHandler(
        new KeyboardEvent('keydown', { code: 'ArrowDown' }),
      );

      assert.equal(
        new Date(2020, 4, 28).toDateString(),
        calendarSk.displayDate.toDateString(),
        'Date has changed.',
      );
      assert.equal(getSelectedDate(), 28, 'Selected date has changed.');
    }));

    it('moves to previous month when PageUp is pressed', () => window.customElements.whenDefined('calendar-sk').then(() => {
      calendarSk.keyboardHandler(
        new KeyboardEvent('keydown', { code: 'PageUp' }),
      );

      assert.equal(
        new Date(2020, 3, 21).toDateString(),
        calendarSk.displayDate.toDateString(),
        'Date has changed.',
      );
      assert.equal(getSelectedDate(), 21, 'Selected date has not changed.');
    }));
    it('moves to next month when PageDown is pressed', () => window.customElements.whenDefined('calendar-sk').then(() => {
      calendarSk.keyboardHandler(
        new KeyboardEvent('keydown', { code: 'PageDown' }),
      );

      assert.equal(
        new Date(2020, 5, 21).toDateString(),
        calendarSk.displayDate.toDateString(),
        'Date has changed.',
      );
      assert.equal(getSelectedDate(), 21, 'Selected date has not changed.');
    }));
  });

  const getSelectedDate = () => +calendarSk.querySelector<HTMLButtonElement>(
    '[aria-selected="true"]',
  )!.innerText;
});