// eslint-disable-next-line @typescript-eslint/triple-slash-reference
/// <reference path="../../../../test/src/custom_typings/chai.d.ts" />
/* eslint-disable no-undef */
import { ZuiPager } from '@zywave/zui-pager';
import { assert } from '@esm-bundle/chai';

suite('zui-pager', () => {
  let element: ZuiPager;

  setup(() => {
    element = document.createElement('zui-pager') as ZuiPager;
    document.body.appendChild(element);
  });

  teardown(() => {
    document.body.removeChild(element);
  });

  test('initializes as a ZuiPager', () => {
    assert.instanceOf(element, ZuiPager);
  });

  test('determine default values are correct', () => {
    assert.equal(element.totalPages, 1);
    assert.equal(element.currentPage, 1);
    assert.equal(element.type, 'standard');
    assert.isUndefined(element.hrefFormat);
    assert.equal(element.hideInput, false);
    assert.isUndefined(element.pageSize);
    assert.isUndefined(element.totalCount);
  });

  test('determine total pages are correct', async () => {
    element.totalPages = 20;
    await element.updateComplete;
    const buttons = element.shadowRoot!.querySelectorAll('.pages .pager-button.page') as NodeListOf<HTMLButtonElement>;
    assert.equal(buttons.length, 7);
    assert.equal(buttons[buttons.length - 1].innerText, '20');
  });

  test('determine total pages are correct', async () => {
    element.totalPages = 100;
    const testValue = 5;
    await element.updateComplete;
    let wasFired = false;
    element.addEventListener('change', () => (wasFired = true));
    const input = element.shadowRoot!.querySelector('input');
    input.value = testValue.toString();
    input.dispatchEvent(new Event('change'));
    await element.updateComplete;
    assert.equal(element.currentPage, testValue);
    assert.isTrue(wasFired);
  });
});