import './index';

import { expect } from 'chai';
import { $, $$ } from 'common-sk/modules/dom';
import { setUpElementUnderTest } from '../../../infra-sk/modules/test_util';
import { PaginationSk, PaginationSkPageChangedEventDetail } from './pagination-sk';

describe('pagination-sk', () => {
  const newInstance = setUpElementUnderTest<PaginationSk>('pagination-sk');

  let paginationSk: PaginationSk;
  beforeEach(() => {
    paginationSk = newInstance((el) => {
      el.setAttribute('offset', '0');
      el.setAttribute('total', '127');
      el.setAttribute('page_size', '20');
    });
  });

  describe('html layout', () => {
    it('has three buttons', () => {
      const btns = $('button', paginationSk);
      expect(btns.length).to.equal(3);
      // backward
      expect(btns[0].hasAttribute('disabled')).to.be.true;
      // forward
      expect(btns[1].hasAttribute('disabled')).to.be.false;
      // forward+5
      expect(btns[2].hasAttribute('disabled')).to.be.false;

      paginationSk.offset = 20;
      expect(btns[0].hasAttribute('disabled')).to.be.false;
      expect(btns[1].hasAttribute('disabled')).to.be.false;
      expect(btns[2].hasAttribute('disabled')).to.be.false;

      paginationSk.offset = 40;
      expect(btns[0].hasAttribute('disabled')).to.be.false;
      expect(btns[1].hasAttribute('disabled')).to.be.false;
      expect(btns[2].hasAttribute('disabled')).to.be.true;

      paginationSk.offset = 120;
      expect(btns[0].hasAttribute('disabled')).to.be.false;
      expect(btns[1].hasAttribute('disabled')).to.be.true;
      expect(btns[2].hasAttribute('disabled')).to.be.true;
    });

    it('displays the page count', () => {
      const cnt = $$<HTMLDivElement>('.counter', paginationSk);
      expect(cnt).to.not.be.null;
      expect(cnt!.textContent).to.have.string('page 1');
    });

    it('has several properties', () => {
      expect(paginationSk.total).to.equal(127);
      expect(paginationSk.offset).to.equal(0);
      expect(paginationSk.page_size).to.equal(20);
    });
  });// end describe('html layout')

  describe('paging behavior', () => {
    it('creates page events', (done) => {
      paginationSk.offset = 20;
      const btns = $<HTMLButtonElement>('button', paginationSk);
      expect(btns.length).to.equal(3);
      const bck = btns[0];
      const fwd = btns[1];
      const pls5 = btns[2];

      let d = 0;
      const deltas = [1, -1, 5];
      paginationSk.addEventListener('page-changed', (e: Event) => {
        expect((e as CustomEvent<PaginationSkPageChangedEventDetail>).detail.delta).to.equal(deltas[d]);
        d++;
        if (d === 3) {
          done();
        }
      });
      fwd.click();
      bck.click();
      pls5.click();
    });
  }); // end describe('paging behavior')
});