/**
 * @license
 * Copyright 2015 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */
import '../../../test/common-test-setup-karma';
import './gr-comment-thread';
import {DraftInfo, sortComments} from '../../../utils/comment-util';
import {GrCommentThread} from './gr-comment-thread';
import {
  NumericChangeId,
  UrlEncodedCommentId,
  Timestamp,
  CommentInfo,
  RepoName,
} from '../../../types/common';
import {
  mockPromise,
  queryAndAssert,
  stubRestApi,
  waitUntilCalled,
  MockPromise,
} from '../../../test/test-utils';
import {
  createAccountDetailWithId,
  createThread,
} from '../../../test/test-data-generators';
import {tap} from '@polymer/iron-test-helpers/mock-interactions';
import {SinonStub} from 'sinon';
import {waitUntil} from '@open-wc/testing-helpers';

const basicFixture = fixtureFromElement('gr-comment-thread');

const c1 = {
  author: {name: 'Kermit'},
  id: 'the-root' as UrlEncodedCommentId,
  message: 'start the conversation',
  updated: '2021-11-01 10:11:12.000000000' as Timestamp,
};

const c2 = {
  author: {name: 'Ms Piggy'},
  id: 'the-reply' as UrlEncodedCommentId,
  message: 'keep it going',
  updated: '2021-11-02 10:11:12.000000000' as Timestamp,
  in_reply_to: 'the-root' as UrlEncodedCommentId,
};

const c3 = {
  author: {name: 'Kermit'},
  id: 'the-draft' as UrlEncodedCommentId,
  message: 'stop it',
  updated: '2021-11-03 10:11:12.000000000' as Timestamp,
  in_reply_to: 'the-reply' as UrlEncodedCommentId,
  __draft: true,
};

const commentWithContext = {
  author: {name: 'Kermit'},
  id: 'the-draft' as UrlEncodedCommentId,
  message: 'just for context',
  updated: '2021-11-03 10:11:12.000000000' as Timestamp,
  line: 5,
  context_lines: [
    {line_number: 4, context_line: 'content of line 4'},
    {line_number: 5, context_line: 'content of line 5'},
    {line_number: 6, context_line: 'content of line 6'},
  ],
};

suite('gr-comment-thread tests', () => {
  let element: GrCommentThread;

  setup(async () => {
    stubRestApi('getLoggedIn').returns(Promise.resolve(false));
    element = basicFixture.instantiate();
    element.changeNum = 1 as NumericChangeId;
    element.showFileName = true;
    element.showFilePath = true;
    element.repoName = 'test-repo-name' as RepoName;
    await element.updateComplete;
    element.account = {...createAccountDetailWithId(13), name: 'Yoda'};
  });

  test('renders with draft', async () => {
    element.thread = createThread(c1, c2, c3);
    await element.updateComplete;
    expect(element).shadowDom.to.equal(/* HTML */ `
      <div class="fileName">
        <span>test-path-comment-thread</span>
        <gr-copy-clipboard hideinput=""></gr-copy-clipboard>
      </div>
      <div class="pathInfo">
        <span>#314</span>
      </div>
      <div id="container">
        <h3 class="assistive-tech-only">Draft Comment thread by Kermit</h3>
        <div class="comment-box" tabindex="0">
          <gr-comment
            collapsed=""
            initially-collapsed=""
            robot-button-disabled=""
            show-patchset=""
          ></gr-comment>
          <gr-comment
            collapsed=""
            initially-collapsed=""
            robot-button-disabled=""
            show-patchset=""
          ></gr-comment>
          <gr-comment robot-button-disabled="" show-patchset=""></gr-comment>
        </div>
      </div>
    `);
  });

  test('renders unsaved', async () => {
    element.thread = createThread();
    await element.updateComplete;
    expect(element).shadowDom.to.equal(/* HTML */ `
      <div class="fileName">
        <span>test-path-comment-thread</span>
        <gr-copy-clipboard hideinput=""></gr-copy-clipboard>
      </div>
      <div class="pathInfo">
        <span>#314</span>
      </div>
      <div id="container">
        <h3 class="assistive-tech-only">
          Unresolved Draft Comment thread by Yoda
        </h3>
        <div class="comment-box unresolved" tabindex="0">
          <gr-comment robot-button-disabled="" show-patchset=""></gr-comment>
        </div>
      </div>
    `);
  });

  test('renders with actions resolved', async () => {
    element.thread = createThread(c1, c2);
    await element.updateComplete;
    expect(queryAndAssert(element, '#container')).dom.to.equal(/* HTML */ `
      <div id="container">
        <h3 class="assistive-tech-only">Comment thread by Kermit</h3>
        <div class="comment-box" tabindex="0">
          <gr-comment
            collapsed=""
            initially-collapsed=""
            show-patchset=""
          ></gr-comment>
          <gr-comment
            collapsed=""
            initially-collapsed=""
            show-patchset=""
          ></gr-comment>
          <div id="actionsContainer">
            <span id="unresolvedLabel"> Resolved </span>
            <div id="actions">
              <gr-button
                aria-disabled="false"
                class="action reply"
                id="replyBtn"
                link=""
                role="button"
                tabindex="0"
              >
                Reply
              </gr-button>
              <gr-button
                aria-disabled="false"
                class="action quote"
                id="quoteBtn"
                link=""
                role="button"
                tabindex="0"
              >
                Quote
              </gr-button>
              <gr-icon
                icon="link"
                class="copy link-icon"
                role="button"
                tabindex="0"
                title="Copy link to this comment"
              ></gr-icon>
            </div>
          </div>
        </div>
      </div>
    `);
  });

  test('renders with actions unresolved', async () => {
    element.thread = createThread(c1, {...c2, unresolved: true});
    await element.updateComplete;
    expect(queryAndAssert(element, '#container')).dom.to.equal(/* HTML */ `
      <div id="container">
        <h3 class="assistive-tech-only">Unresolved Comment thread by Kermit</h3>
        <div class="comment-box unresolved" tabindex="0">
          <gr-comment show-patchset=""></gr-comment>
          <gr-comment show-patchset=""></gr-comment>
          <div id="actionsContainer">
            <span id="unresolvedLabel"> Unresolved </span>
            <div id="actions">
              <gr-button
                aria-disabled="false"
                class="action reply"
                id="replyBtn"
                link=""
                role="button"
                tabindex="0"
              >
                Reply
              </gr-button>
              <gr-button
                aria-disabled="false"
                class="action quote"
                id="quoteBtn"
                link=""
                role="button"
                tabindex="0"
              >
                Quote
              </gr-button>
              <gr-button
                aria-disabled="false"
                class="action ack"
                id="ackBtn"
                link=""
                role="button"
                tabindex="0"
              >
                Ack
              </gr-button>
              <gr-button
                aria-disabled="false"
                class="action done"
                id="doneBtn"
                link=""
                role="button"
                tabindex="0"
              >
                Done
              </gr-button>
              <gr-icon
                icon="link"
                class="copy link-icon"
                role="button"
                tabindex="0"
                title="Copy link to this comment"
              ></gr-icon>
            </div>
          </div>
        </div>
      </div>
    `);
  });

  test('renders with diff', async () => {
    element.showCommentContext = true;
    element.thread = createThread(commentWithContext);
    await element.updateComplete;
    expect(queryAndAssert(element, '.diff-container')).dom.to.equal(/* HTML */ `
      <div class="diff-container">
        <gr-diff
          class="disable-context-control-buttons hide-line-length-indicator no-left"
          id="diff"
          style="--line-limit-marker:100ch; --content-width:none; --diff-max-width:none; --font-size:12px;"
        >
        </gr-diff>
        <div class="view-diff-container">
          <a href="">
            <gr-button
              aria-disabled="false"
              class="view-diff-button"
              link=""
              role="button"
              tabindex="0"
            >
              View Diff
            </gr-button>
          </a>
        </div>
      </div>
    `);
  });

  suite('action button clicks', () => {
    let savePromise: MockPromise<DraftInfo>;
    let stub: SinonStub;

    setup(async () => {
      savePromise = mockPromise<DraftInfo>();
      stub = sinon
        .stub(element.getCommentsModel(), 'saveDraft')
        .returns(savePromise);

      element.thread = createThread(c1, {...c2, unresolved: true});
      await element.updateComplete;
    });

    test('handle Ack', async () => {
      tap(queryAndAssert(element, '#ackBtn'));
      waitUntilCalled(stub, 'saveDraft()');
      assert.equal(stub.lastCall.firstArg.message, 'Ack');
      assert.equal(stub.lastCall.firstArg.unresolved, false);
      assert.isTrue(element.saving);

      savePromise.resolve();
      await element.updateComplete;
      assert.isFalse(element.saving);
    });

    test('handle Done', async () => {
      tap(queryAndAssert(element, '#doneBtn'));
      waitUntilCalled(stub, 'saveDraft()');
      assert.equal(stub.lastCall.firstArg.message, 'Done');
      assert.equal(stub.lastCall.firstArg.unresolved, false);
    });

    test('handle Reply', async () => {
      assert.isUndefined(element.unsavedComment);
      tap(queryAndAssert(element, '#replyBtn'));
      assert.equal(element.unsavedComment?.message, '');
    });

    test('handle Quote', async () => {
      assert.isUndefined(element.unsavedComment);
      tap(queryAndAssert(element, '#quoteBtn'));
      assert.equal(element.unsavedComment?.message?.trim(), `> ${c2.message}`);
    });
  });

  suite('self removal when empty thread changed to editing:false', () => {
    let threadEl: GrCommentThread;

    setup(async () => {
      threadEl = basicFixture.instantiate();
      threadEl.thread = createThread();
    });

    test('new thread el normally has a parent and an unsaved comment', async () => {
      await waitUntil(() => threadEl.editing);
      assert.isOk(threadEl.unsavedComment);
      assert.isOk(threadEl.parentElement);
    });

    test('thread el removed after clicking CANCEL', async () => {
      await waitUntil(() => threadEl.editing);

      const commentEl = queryAndAssert(threadEl, 'gr-comment');
      const buttonEl = queryAndAssert(commentEl, 'gr-button.cancel');
      tap(buttonEl);

      await waitUntil(() => !threadEl.editing);
      assert.isNotOk(threadEl.parentElement);
    });
  });

  test('comments are sorted correctly', () => {
    const comments: CommentInfo[] = [
      {
        id: 'jacks_confession' as UrlEncodedCommentId,
        in_reply_to: 'sallys_confession' as UrlEncodedCommentId,
        message: 'i like you, too',
        updated: '2015-12-25 15:00:20.396000000' as Timestamp,
      },
      {
        id: 'sallys_confession' as UrlEncodedCommentId,
        message: 'i like you, jack',
        updated: '2015-12-24 15:00:20.396000000' as Timestamp,
      },
      {
        id: 'sally_to_dr_finklestein' as UrlEncodedCommentId,
        message: 'i’m running away',
        updated: '2015-10-31 09:00:20.396000000' as Timestamp,
      },
      {
        id: 'sallys_defiance' as UrlEncodedCommentId,
        in_reply_to: 'sally_to_dr_finklestein' as UrlEncodedCommentId,
        message: 'i will poison you so i can get away',
        updated: '2015-10-31 15:00:20.396000000' as Timestamp,
      },
      {
        id: 'dr_finklesteins_response' as UrlEncodedCommentId,
        in_reply_to: 'sally_to_dr_finklestein' as UrlEncodedCommentId,
        message: 'no i will pull a thread and your arm will fall off',
        updated: '2015-10-31 11:00:20.396000000' as Timestamp,
      },
      {
        id: 'sallys_mission' as UrlEncodedCommentId,
        message: 'i have to find santa',
        updated: '2015-12-24 15:00:20.396000000' as Timestamp,
      },
    ];
    const results = sortComments(comments);
    assert.deepEqual(results, [
      {
        id: 'sally_to_dr_finklestein' as UrlEncodedCommentId,
        message: 'i’m running away',
        updated: '2015-10-31 09:00:20.396000000' as Timestamp,
      },
      {
        id: 'dr_finklesteins_response' as UrlEncodedCommentId,
        in_reply_to: 'sally_to_dr_finklestein' as UrlEncodedCommentId,
        message: 'no i will pull a thread and your arm will fall off',
        updated: '2015-10-31 11:00:20.396000000' as Timestamp,
      },
      {
        id: 'sallys_defiance' as UrlEncodedCommentId,
        in_reply_to: 'sally_to_dr_finklestein' as UrlEncodedCommentId,
        message: 'i will poison you so i can get away',
        updated: '2015-10-31 15:00:20.396000000' as Timestamp,
      },
      {
        id: 'sallys_confession' as UrlEncodedCommentId,
        message: 'i like you, jack',
        updated: '2015-12-24 15:00:20.396000000' as Timestamp,
      },
      {
        id: 'sallys_mission' as UrlEncodedCommentId,
        message: 'i have to find santa',
        updated: '2015-12-24 15:00:20.396000000' as Timestamp,
      },
      {
        id: 'jacks_confession' as UrlEncodedCommentId,
        in_reply_to: 'sallys_confession' as UrlEncodedCommentId,
        message: 'i like you, too',
        updated: '2015-12-25 15:00:20.396000000' as Timestamp,
      },
    ]);
  });
});