/**
 * @license
 * Copyright (C) 2021 The Android Open Source Project
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import '../../../test/common-test-setup-karma';
import '../gr-diff/gr-diff-group';
import './gr-context-controls';
import {GrContextControls} from './gr-context-controls';
import {flush} from '@polymer/polymer/lib/legacy/polymer.dom';

import {GrDiffLine, GrDiffLineType} from '../gr-diff/gr-diff-line';
import {GrDiffGroup, GrDiffGroupType} from '../gr-diff/gr-diff-group';
import {DiffFileMetaInfo, DiffInfo} from '../../../api/diff';

const blankFixture = fixtureFromElement('div');

suite('gr-context-control tests', () => {
  let element: GrContextControls;

  setup(async () => {
    element = document.createElement('gr-context-controls');
    element.diff = ({content: []} as any) as DiffInfo;
    element.renderPreferences = {};
    element.section = document.createElement('div');
    blankFixture.instantiate().appendChild(element);
    await flush();
  });

  function createContextGroups(options: {offset?: number; count?: number}) {
    const offset = options.offset || 0;
    const numLines = options.count || 10;
    const lines = [];
    for (let i = 0; i < numLines; i++) {
      const line = new GrDiffLine(GrDiffLineType.BOTH);
      line.beforeNumber = offset + i + 1;
      line.afterNumber = offset + i + 1;
      line.text = 'lorem upsum';
      lines.push(line);
    }

    return [new GrDiffGroup(GrDiffGroupType.BOTH, lines)];
  }

  test('no +10 buttons for 10 or less lines', async () => {
    element.contextGroups = createContextGroups({count: 10});
    await flush();

    const buttons = element.shadowRoot!.querySelectorAll(
      'gr-button.showContext'
    );
    assert.equal(buttons.length, 1);
    assert.equal(buttons[0].textContent!.trim(), '+10 common lines');
  });

  test('context control at the top', async () => {
    element.contextGroups = createContextGroups({offset: 0, count: 20});
    element.showBelow = true;
    await flush();

    const buttons = element.shadowRoot!.querySelectorAll(
      'gr-button.showContext'
    );

    assert.equal(buttons.length, 2);
    assert.equal(buttons[0].textContent!.trim(), '+20 common lines');
    assert.equal(buttons[1].textContent!.trim(), '+10');

    assert.include([...buttons[0].classList.values()], 'belowButton');
    assert.include([...buttons[1].classList.values()], 'belowButton');
  });

  test('context control in the middle', async () => {
    element.contextGroups = createContextGroups({offset: 10, count: 20});
    element.showAbove = true;
    element.showBelow = true;
    await flush();

    const buttons = element.shadowRoot!.querySelectorAll(
      'gr-button.showContext'
    );

    assert.equal(buttons.length, 3);
    assert.equal(buttons[0].textContent!.trim(), '+20 common lines');
    assert.equal(buttons[1].textContent!.trim(), '+10');
    assert.equal(buttons[2].textContent!.trim(), '+10');

    assert.include([...buttons[0].classList.values()], 'centeredButton');
    assert.include([...buttons[1].classList.values()], 'aboveButton');
    assert.include([...buttons[2].classList.values()], 'belowButton');
  });

  test('context control at the bottom', async () => {
    element.contextGroups = createContextGroups({offset: 30, count: 20});
    element.showAbove = true;
    await flush();

    const buttons = element.shadowRoot!.querySelectorAll(
      'gr-button.showContext'
    );

    assert.equal(buttons.length, 2);
    assert.equal(buttons[0].textContent!.trim(), '+20 common lines');
    assert.equal(buttons[1].textContent!.trim(), '+10');

    assert.include([...buttons[0].classList.values()], 'aboveButton');
    assert.include([...buttons[1].classList.values()], 'aboveButton');
  });

  test('context control with block expansion at the top', async () => {
    element.renderPreferences!.use_block_expansion = true;
    element.diff!.meta_b = ({
      syntax_tree: [],
    } as any) as DiffFileMetaInfo;
    element.contextGroups = createContextGroups({offset: 0, count: 20});
    element.showBelow = true;
    await flush();

    const fullExpansionButtons = element.shadowRoot!.querySelectorAll(
      '.fullExpansion gr-button'
    );
    const partialExpansionButtons = element.shadowRoot!.querySelectorAll(
      '.partialExpansion gr-button'
    );
    const blockExpansionButtons = element.shadowRoot!.querySelectorAll(
      '.blockExpansion gr-button'
    );
    assert.equal(fullExpansionButtons.length, 1);
    assert.equal(partialExpansionButtons.length, 1);
    assert.equal(blockExpansionButtons.length, 1);
    assert.equal(blockExpansionButtons[0].textContent!.trim(), '+Block');
    assert.include(
      [...blockExpansionButtons[0].classList.values()],
      'belowButton'
    );
  });

  test('context control with block expansion in the middle', async () => {
    element.renderPreferences!.use_block_expansion = true;
    element.diff!.meta_b = ({
      syntax_tree: [],
    } as any) as DiffFileMetaInfo;

    element.contextGroups = createContextGroups({offset: 10, count: 20});
    element.showAbove = true;
    element.showBelow = true;
    await flush();

    const fullExpansionButtons = element.shadowRoot!.querySelectorAll(
      '.fullExpansion gr-button'
    );
    const partialExpansionButtons = element.shadowRoot!.querySelectorAll(
      '.partialExpansion gr-button'
    );
    const blockExpansionButtons = element.shadowRoot!.querySelectorAll(
      '.blockExpansion gr-button'
    );
    assert.equal(fullExpansionButtons.length, 1);
    assert.equal(partialExpansionButtons.length, 2);
    assert.equal(blockExpansionButtons.length, 2);
    assert.equal(blockExpansionButtons[0].textContent!.trim(), '+Block');
    assert.equal(blockExpansionButtons[1].textContent!.trim(), '+Block');
    assert.include(
      [...blockExpansionButtons[0].classList.values()],
      'aboveButton'
    );
    assert.include(
      [...blockExpansionButtons[1].classList.values()],
      'belowButton'
    );
  });

  test('context control with block expansion at the bottom', async () => {
    element.renderPreferences!.use_block_expansion = true;
    element.diff!.meta_b = ({
      syntax_tree: [],
    } as any) as DiffFileMetaInfo;
    element.contextGroups = createContextGroups({offset: 30, count: 20});
    element.showAbove = true;
    await flush();

    const fullExpansionButtons = element.shadowRoot!.querySelectorAll(
      '.fullExpansion gr-button'
    );
    const partialExpansionButtons = element.shadowRoot!.querySelectorAll(
      '.partialExpansion gr-button'
    );
    const blockExpansionButtons = element.shadowRoot!.querySelectorAll(
      '.blockExpansion gr-button'
    );
    assert.equal(fullExpansionButtons.length, 1);
    assert.equal(partialExpansionButtons.length, 1);
    assert.equal(blockExpansionButtons.length, 1);
    assert.equal(blockExpansionButtons[0].textContent!.trim(), '+Block');
    assert.include(
      [...blockExpansionButtons[0].classList.values()],
      'aboveButton'
    );
  });
});