import './index.js'

import { $, $$ } from 'common-sk/modules/dom'
import {
  firstPage,
  firstPageAfterUndoingFirstEntry,
  firstPageWithDetails,
  secondPage,
  secondPageWithDetails
} from './test_data'
import { eventPromise, expectNoUnmatchedCalls } from '../test_util'
import { fetchMock } from 'fetch-mock';

fetchMock.config.overwriteRoutes = true;

describe('triagelog-page-sk', () => {
  // Component under test.
  let triagelogPageSk;

  // Each test case is responsible for instantiating its component under test.
  function newTriagelogPageSk() {
    triagelogPageSk = document.createElement('triagelog-page-sk');
    document.body.appendChild(triagelogPageSk);
  }

  // Convenience functions to query child DOM nodes of the component under test.
  const q = (str) => $(str, triagelogPageSk);
  const qq = (str) => $$(str, triagelogPageSk);

  beforeEach(async () => {
    // The test runner will pollute the URL with its own query string, so we
    // need to clean it before running our test cases, as this could interfere
    // with the stateReflector.
    history.pushState(
        null,
        '',
        window.location.origin + window.location.pathname + '?');

    // Make sure the component under test is defined before carrying on.
    await window.customElements.whenDefined('triagelog-page-sk');
  });

  afterEach(() => {
    // Remove the stale instance under test.
    if (triagelogPageSk) {
      document.body.removeChild(triagelogPageSk);
      triagelogPageSk = null;
    }

    // Remove fetch mocking to prevent test cases interfering with each other.
    fetchMock.reset();
  });

  describe('details hidden', () => {
    it('shows the right initial entries', async () => {
      fetchMock.get(
          '/json/triagelog?details=false&offset=0&size=20',
          firstPage);

      // Instantiate the page. This retrieves the first page of triage logs.
      await endTaskEvent(newTriagelogPageSk);

      // Assert that the query string was updated with the pagination parameters
      // returned by the mock RPC.
      expect(window.location.search).to.equal("?page_size=3");

      // Assert that we get the first page of triagelog entries.
      expect(nthEntry(0)).to.deep.equal(
          [toLocalDateStr(1572000000000), 'alpha@google.com', 2]);
      expect(nthEntry(1)).to.deep.equal(
          [toLocalDateStr(1571900000000), 'beta@google.com', 1]);
      expect(nthEntry(2)).to.deep.equal(
          [toLocalDateStr(1571800000000), 'gamma@google.com', 1]);

      // Assert that no details are visible.
      expect(q('.details .test-name')).to.be.empty;

      expect(fetchMock.done()).to.be.true;
      expectNoUnmatchedCalls(fetchMock);
    });

    it('loads the next page', async () => {
      fetchMock.get(
          '/json/triagelog?details=false&offset=0&size=20',
          firstPage);
      fetchMock.get(
          '/json/triagelog?details=false&offset=3&size=3',
          secondPage);

      // Instantiate the page. This retrieves the first page of triage logs.
      await endTaskEvent(newTriagelogPageSk);

      // Advance to the next page.
      await endTaskEvent(() => qq('pagination-sk button.next').click());

      // Assert that the query string was updated with the pagination parameters
      // returned by the mock RPC.
      expect(window.location.search).to.equal("?offset=3&page_size=3");

      // Assert that we get the second page of triagelog entries.
      expect(nthEntry(0)).to.deep.equal(
          [toLocalDateStr(1571700000000), 'delta@google.com', 1]);
      expect(nthEntry(1)).to.deep.equal(
          [toLocalDateStr(1571600000000), 'epsilon@google.com', 1]);
      expect(nthEntry(2)).to.deep.equal(
          [toLocalDateStr(1571500000000), 'zeta@google.com', 1]);

      // Assert that no details are visible.
      expect(q('.details .test-name')).to.be.empty;

      expect(fetchMock.done()).to.be.true;
      expectNoUnmatchedCalls(fetchMock);
    });

    it('undoes an entry', async () => {
      fetchMock.get(
          '/json/triagelog?details=false&offset=0&size=20',
          firstPage);
      fetchMock.post(
          '/json/triagelog/undo?id=aaa',
          firstPageAfterUndoingFirstEntry);

      // Instantiate the page. This retrieves the first page of triage logs.
      await endTaskEvent(newTriagelogPageSk);

      // Undo first entry.
      await endTaskEvent(() => qq('tbody button.undo').click());

      // Assert that the query string was updated with the pagination parameters
      // returned by the mock RPC.
      expect(window.location.search).to.equal("?page_size=3");

      // Assert that we get the first page of triagelog entries minus the undone
      // one.
      expect(nthEntry(0)).to.deep.equal(
          [toLocalDateStr(1571900000000), 'beta@google.com', 1]);
      expect(nthEntry(1)).to.deep.equal(
          [toLocalDateStr(1571800000000), 'gamma@google.com', 1]);
      expect(nthEntry(2)).to.deep.equal(
          [toLocalDateStr(1571700000000), 'delta@google.com', 1]);

      // Assert that no details are visible.
      expect(q('.details .test-name')).to.be.empty;

      expect(fetchMock.done()).to.be.true;
      expectNoUnmatchedCalls(fetchMock);
    });
  });

  describe('details visible', () => {
    it('shows details when checkbox is clicked', async () => {
      fetchMock.get(
          '/json/triagelog?details=false&offset=0&size=20',
          firstPage);
      fetchMock.get(
          '/json/triagelog?details=true&offset=0&size=3',
          firstPageWithDetails);

      // Instantiate the page. This retrieves the first page of triage logs.
      await endTaskEvent(newTriagelogPageSk);

      // Show details.
      await endTaskEvent(() => qq('.details-checkbox').click());

      // Assert that the query string was updated with the pagination parameters
      // returned by the mock RPC.
      expect(window.location.search).to.equal("?details=true&page_size=3");

      // Assert that we get the first page of triagelog entries with details.
      expect(nthEntry(0)).to.deep.equal(
          [toLocalDateStr(1572000000000), 'alpha@google.com', 2]);
      expect(nthDetailsRow(0)).to.deep.equal([
          'async_rescale_and_read_dog_up',
          'f16298eb14e19f9230fe81615200561f',
          digestDetailsHref(
              'async_rescale_and_read_dog_up',
              'f16298eb14e19f9230fe81615200561f'),
          'positive']);
      expect(nthDetailsRow(1)).to.deep.equal([
          'async_rescale_and_read_rose',
          '35c77280a7d5378033f9bf8f3c755e78',
          digestDetailsHref(
              'async_rescale_and_read_rose',
              '35c77280a7d5378033f9bf8f3c755e78'),
          'positive']);
      expect(nthEntry(1)).to.deep.equal(
          [toLocalDateStr(1571900000000), 'beta@google.com', 1]);
      expect(nthDetailsRow(2)).to.deep.equal([
          'draw_image_set',
          'b788aadee662c2b0390d698cbe68b808',
          digestDetailsHref(
              'draw_image_set',
              'b788aadee662c2b0390d698cbe68b808'),
          'positive']);
      expect(nthEntry(2)).to.deep.equal(
          [toLocalDateStr(1571800000000), 'gamma@google.com', 1]);
      expect(nthDetailsRow(3)).to.deep.equal([
          'filterbitmap_text_7.00pt',
          '454b4b547bc6ceb4cdeb3305553be98a',
          digestDetailsHref(
              'filterbitmap_text_7.00pt',
              '454b4b547bc6ceb4cdeb3305553be98a'),
          'positive']);

      expect(fetchMock.done()).to.be.true;
      expectNoUnmatchedCalls(fetchMock);
    });

    it('details remain visible when loading next page', async () => {
      fetchMock.get(
          '/json/triagelog?details=false&offset=0&size=20',
          firstPage);
      fetchMock.get(
          '/json/triagelog?details=true&offset=0&size=3',
          firstPageWithDetails);
      fetchMock.get(
          '/json/triagelog?details=true&offset=3&size=3',
          secondPageWithDetails);

      // Instantiate the page. This retrieves the first page of triage logs.
      await endTaskEvent(newTriagelogPageSk);

      // Show details.
      await endTaskEvent(() => qq('.details-checkbox').click());

      // Advance to the next page.
      await endTaskEvent(() => qq('pagination-sk button.next').click());

      // Assert that the query string was updated with the pagination parameters
      // returned by the mock RPC.
      expect(window.location.search).to.equal(
          "?details=true&offset=3&page_size=3");

      // Assert that we get the second page of triagelog entries with details.
      expect(nthEntry(0)).to.deep.equal(
          [toLocalDateStr(1571700000000), 'delta@google.com', 1]);
      expect(nthDetailsRow(0)).to.deep.equal([
          'filterbitmap_text_10.00pt',
          'fc8392000945e68334c5ccd333b201b3',
          digestDetailsHref(
              'filterbitmap_text_10.00pt',
              'fc8392000945e68334c5ccd333b201b3'),
          'positive']);
      expect(nthEntry(1)).to.deep.equal([
          toLocalDateStr(1571600000000),
          'epsilon@google.com',
          1]);
      expect(nthDetailsRow(1)).to.deep.equal([
          'filterbitmap_image_mandrill_32.png',
          '7606bfd486f7dfdf299d9d9da8f99c8e',
          digestDetailsHref(
              'filterbitmap_image_mandrill_32.png',
              '7606bfd486f7dfdf299d9d9da8f99c8e'),
          'positive']);
      expect(nthEntry(2)).to.deep.equal(
          [toLocalDateStr(1571500000000), 'zeta@google.com', 1]);
      expect(nthDetailsRow(2)).to.deep.equal([
          'drawminibitmaprect_aa',
          '95e1b42fcaaff5d0d08b4ed465d79437',
          digestDetailsHref(
              'drawminibitmaprect_aa',
              '95e1b42fcaaff5d0d08b4ed465d79437'),
          'positive']);

      expect(fetchMock.done()).to.be.true;
      expectNoUnmatchedCalls(fetchMock);
    });

    it('undoes an entry, which unchecks "Show details"', async () => {
      fetchMock.get(
          '/json/triagelog?details=false&offset=0&size=20',
          firstPage);
      fetchMock.get(
          '/json/triagelog?details=true&offset=0&size=3',
          firstPageWithDetails);
      fetchMock.post(
          '/json/triagelog/undo?id=aaa',
          firstPageAfterUndoingFirstEntry);

      // Instantiate the page. This retrieves the first page of triage logs.
      await endTaskEvent(newTriagelogPageSk);

      // Show details.
      await endTaskEvent(() => qq('.details-checkbox').click());

      // Undo first entry.
      await endTaskEvent(() => qq('tbody button.undo').click());

      // Assert that the query string was updated with the pagination parameters
      // returned by the mock RPC.
      expect(window.location.search).to.equal("?page_size=3");

      // "Show details" should be unchecked now.
      expect(qq('.details-checkbox').checked).to.be.false;

      // Assert that we get the first page of triagelog entries.
      expect(nthEntry(0)).to.deep.equal(
          [toLocalDateStr(1571900000000), 'beta@google.com', 1]);
      expect(nthEntry(1)).to.deep.equal(
          [toLocalDateStr(1571800000000), 'gamma@google.com', 1]);
      expect(nthEntry(2)).to.deep.equal(
          [toLocalDateStr(1571700000000), 'delta@google.com', 1]);

      // Assert that no details are visible.
      expect(q('.details .test-name')).to.be.empty;

      expect(fetchMock.done()).to.be.true;
      expectNoUnmatchedCalls(fetchMock);
    });
  });

  describe('URL parameters', () => {
    it('initializes paging based on the URL parameters', async () => {
      // Query string set to second page of results, with details.
      const queryString = '?details=true&offset=3&page_size=3';
      history.pushState(
          null,
          '',
          window.location.origin + window.location.pathname + queryString);

      fetchMock.get(
          '/json/triagelog?details=true&offset=3&size=3',
          secondPageWithDetails);

      // Instantiate the page. This retrieves the first page of triage logs.
      await endTaskEvent(newTriagelogPageSk);

      // "Show details" should be checked.
      expect(qq('.details-checkbox').checked).to.be.true;

      // Assert that we get the second page of triagelog entries with details.
      expect(nthEntry(0)).to.deep.equal(
          [toLocalDateStr(1571700000000), 'delta@google.com', 1]);
      expect(nthDetailsRow(0)).to.deep.equal([
          'filterbitmap_text_10.00pt',
          'fc8392000945e68334c5ccd333b201b3',
          digestDetailsHref(
              'filterbitmap_text_10.00pt',
              'fc8392000945e68334c5ccd333b201b3'),
          'positive']);
      expect(nthEntry(1)).to.deep.equal(
          [toLocalDateStr(1571600000000), 'epsilon@google.com', 1]);
      expect(nthDetailsRow(1)).to.deep.equal([
          'filterbitmap_image_mandrill_32.png',
          '7606bfd486f7dfdf299d9d9da8f99c8e',
          digestDetailsHref(
              'filterbitmap_image_mandrill_32.png',
              '7606bfd486f7dfdf299d9d9da8f99c8e'),
          'positive']);
      expect(nthEntry(2)).to.deep.equal(
          [toLocalDateStr(1571500000000), 'zeta@google.com', 1]);
      expect(nthDetailsRow(2)).to.deep.equal([
          'drawminibitmaprect_aa',
          '95e1b42fcaaff5d0d08b4ed465d79437',
          digestDetailsHref(
              'drawminibitmaprect_aa',
              '95e1b42fcaaff5d0d08b4ed465d79437'),
          'positive']);

      expect(fetchMock.done()).to.be.true;
      expectNoUnmatchedCalls(fetchMock);
    });
  });

  describe('RPC error', () => {
    it('should emit event "fetch-error" on RPC failure', async () => {
      fetchMock.get('glob:*', 500);  // Internal server error on any request.

      // Instantiate the page. This will try retrieving the first page of
      // results and fail with an internal server error.
      await fetchErrorEvent(newTriagelogPageSk);

      // At this point it's guaranteed that the fetch-error event was caught.
      // Assert that there are no log entries on screen.
      expect($$('tbody').children).to.be.empty;
    });
  });

  const toLocalDateStr = (timestampMS) => new Date(timestampMS).toLocaleString();
  const digestDetailsHref = (test, digest) =>
      window.location.origin +
          `/detail?test=${encodeURIComponent(test)}&digest=${encodeURIComponent(digest)}`;

  const nthEntryTimestamp = (n) => q('.timestamp')[n].innerText;
  const nthEntryAuthor = (n) => q('.author')[n].innerText;
  const nthEntryNumChanges = (n) => +q('.num-changes')[n].innerText;
  const nthEntry = (n) => [
    nthEntryTimestamp(n),
    nthEntryAuthor(n),
    nthEntryNumChanges(n)
  ];

  const nthDetailsRowTestName =
      (n) => q('.details .test-name')[n].innerText;
  const nthDetailsRowDigest = (n) => q('.details .digest')[n].innerText;
  const nthDetailsRowDigestHref = (n) => q('.details .digest a')[n].href;
  const nthDetailsRowLabel = (n) => q('.details .label')[n].innerText;
  const nthDetailsRow = (n) => [
      nthDetailsRowTestName(n),
      nthDetailsRowDigest(n),
      nthDetailsRowDigestHref(n),
      nthDetailsRowLabel(n)
  ];

  // TODO(lovisolo): Add function to build a promise that will resolve when the
  //                 given sequence of events is caught.
  //
  // TODO(lovisolo): Use said function to assert on the tests above that event
  //                 "begin-task" always precedes events "end-task" and
  //                 "fetch-error".
  //
  // TODO(lovisolo): Move said promise builder functions to test_util.js.

  // Adds an event handler for "end-task", then calls the given function.
  // Returns a promise that will resolve when the event is caught.
  //
  // The promise will be rejected if the event isn't caught within 5 seconds.
  function endTaskEvent(fn) {
    const promise = eventPromise('end-task');
    fn();
    return promise;
  }

  // Adds an event handler for "fetch-error", then calls the given function.
  // Returns a promise that will resolve when the event is caught.
  //
  // The promise will be rejected if the event isn't caught within 5 seconds.
  function fetchErrorEvent(fn) {
    const promise = eventPromise('fetch-error');
    fn();
    return promise;
  }

});