import './index';
import { $ } from 'common-sk/modules/dom';

import { assert } from 'chai';

const container = document.createElement('div');
document.body.appendChild(container);

afterEach(() => {
  container.innerHTML = '';
});

describe('sort-sk', () => {
  it('sorts numerically by default', () => window.customElements.whenDefined('sort-sk').then(() => {
    container.innerHTML = `
  <sort-sk target=stuffToBeSorted>
    <button id=cluster data-key=clustersize data-default=up>Cluster Size</button>
    <button id=size data-key=stepsize>Step Size</button>
  </sort-sk>

  <div id=stuffToBeSorted>
    <pre data-clustersize=10  data-stepsize=1.2>Size=10   Step=1.2</pre>
    <pre data-clustersize=50  data-stepsize=0.5>Size=50   Step=0.5</pre>
    <pre data-clustersize=100 data-stepsize=0.6>Size=100  Step=0.6</pre>
  </div>`;
    const getValues = (name: string) => $<HTMLPreElement>('#stuffToBeSorted pre', container).map(
      (ele) => +(ele.dataset[name] || ''),
    );

    const clusterButton = container.querySelector<HTMLButtonElement>(
      '#cluster',
    )!;
    const stepButton = container.querySelector<HTMLButtonElement>('#size')!;

    clusterButton.click();
    assert.deepEqual(
      [100, 50, 10],
      getValues('clustersize'),
      'Defaults to up, so sort down on first click.',
    );
    clusterButton.click();
    assert.deepEqual(
      [10, 50, 100],
      getValues('clustersize'),
      'Switch to up.',
    );

    stepButton.click();
    assert.deepEqual(
      [1.2, 0.6, 0.5],
      getValues('stepsize'),
      'No default, so start sorting down.',
    );
    stepButton.click();
    assert.deepEqual([0.5, 0.6, 1.2], getValues('stepsize'), 'Switch to up.');
  }));

  it('sorts alphabetically with alpha attribute', () => window.customElements.whenDefined('sort-sk').then(() => {
    container.innerHTML = `
  <sort-sk target=stuffToBeSorted2>
    <button id=name  data-key=name data-default=down data-sort-type=alpha>Name</button>
    <button id=level data-key=level                  data-sort-type=alpha>Level</button>
  </sort-sk>

  <div id=stuffToBeSorted2>
    <pre data-name=foo data-level=alpha>foo alpha</pre>
    <pre data-name=baz data-level=beta >baz beta</pre>
    <pre data-name=bar data-level=gamma>bar gamma</pre>
  </div>
  `;
    const getValues = (name: string) => $<HTMLPreElement>('#stuffToBeSorted2 pre', container).map(
      (ele) => ele.dataset[name],
    );

    const nameButton = container.querySelector<HTMLButtonElement>('#name')!;
    const levelButton = container.querySelector<HTMLButtonElement>('#level')!;

    nameButton.click();
    assert.deepEqual(
      ['bar', 'baz', 'foo'],
      getValues('name'),
      'Defaults to down, so sort up.',
    );
    nameButton.click();
    assert.deepEqual(
      ['foo', 'baz', 'bar'],
      getValues('name'),
      'Now switch to down.',
    );

    levelButton.click();
    assert.deepEqual(
      ['gamma', 'beta', 'alpha'],
      getValues('level'),
      'No default, so sort down.',
    );
    levelButton.click();
    assert.deepEqual(
      ['alpha', 'beta', 'gamma'],
      getValues('level'),
      'Now switch to up.',
    );
  }));
});