import { html } from 'lit';
import { expect, fixture, oneEvent } from '@open-wc/testing';
// eslint-disable-next-line import/no-duplicates
import '../components/IxPagination.js';
// eslint-disable-next-line import/no-duplicates
import { IxPagination } from '../components/IxPagination.js';

describe('IxPagination', () => {
  it('renders pagination', async () => {
    const el = await fixture(html`<ix-pagination></ix-pagination>`);

    expect(el).to.not.be.null;
  });

  it('renders pagination page size select', async () => {
    const el = await fixture(html`<ix-pagination
      .pageSizes=${[1, 2, 3]}
    ></ix-pagination>`);

    const pageSizeSelect = el?.shadowRoot?.querySelectorAll('ix-select-option');

    expect(pageSizeSelect?.length).to.equal(3);
  });

  it('renders pagination range info', async () => {
    const el = await fixture(html`<ix-pagination
      pageSize="10"
      page="2"
      recordCount="99"
    ></ix-pagination>`);

    const pageRangeInfo = el?.shadowRoot?.querySelectorAll('p')[1];

    expect(pageRangeInfo?.innerText).to.equal('11 - 20 of 99');
  });

  it('calculates new page when page size increases', async () => {
    const el = await fixture<IxPagination>(html`<ix-pagination
      .pageSizes=${[10, 20, 50, 100]}
      pageSize="50"
      page="5"
      recordCount="600"
    ></ix-pagination>`);

    const listener = oneEvent(el, 'updatePagination');

    const ixSelect = el.shadowRoot?.querySelector(
      "ix-select-option[value='100']"
    );
    ixSelect?.shadowRoot?.querySelector('li')?.click();

    const event = await listener;

    expect(event.detail.page).to.equal(3);
    expect(event.detail.pageSize).to.equal(100);
  });

  it('calculates new page when page size decreases', async () => {
    const el = await fixture<IxPagination>(html`<ix-pagination
      .pageSizes=${[10, 20, 50, 100]}
      pageSize="50"
      page="5"
      recordCount="600"
    ></ix-pagination>`);

    const listener = oneEvent(el, 'updatePagination');

    const ixSelect = el.shadowRoot?.querySelector(
      "ix-select-option[value='20']"
    );
    ixSelect?.shadowRoot?.querySelector('li')?.click();

    const event = await listener;

    expect(event.detail.page).to.equal(11);
    expect(event.detail.pageSize).to.equal(20);
  });
});