import $ from 'jquery';
import testHelper from 'test-helper';
import ListAndDetailView from 'bitbucket/internal/bbui/list-and-detail-view/list-and-detail-view';

testHelper.setTemplates({
    'bitbucket.internal.component.listAndDetailView.main': ({ listContent, detailContent }) => `
        <div class='list-and-detail-view'>
            <div class='list-view'>
                ${listContent}
            </div>
            <div class='detail-view'>
                ${detailContent}
            </div>
        </div>
    `,
});

QUnit.module('bitbucket-list-and-detail-view', {
    beforeEach: function() {
        this.listAndDetailView = new ListAndDetailView($('#qunit-fixture'), {
            selectedClass: 'selected',
            listContent: '<ul id="items"><li id="one">One</li><li id="two" class="selected">Two</li><li id="three">Three</li></ul>',
            detailContent: '<span id="details">Two</span>',
        });

    },
    afterEach: function() {
        this.listAndDetailView.destroy();
        this.listAndDetailView = null;
    },
});

QUnit.test('click changes selection', function(assert) {
    testActionSelectsId.call(this, assert, function() {
        this.listAndDetailView.$listView.find('#one').click();
    }, 'one');
});

QUnit.test('j changes selection to next', function(assert) {
    testActionSelectsId.call(this, assert, function() {
        const evt = $.Event('keydown');
        evt.which = 74; // j
        this.listAndDetailView._shortcutHandler(evt);
    }, 'three');
});

QUnit.test('k changes selection to previous', function(assert) {
    testActionSelectsId.call(this, assert, function() {
        const evt = $.Event('keydown');
        evt.which = 75; // k
        this.listAndDetailView._shortcutHandler(evt);
    }, 'one');
});

QUnit.test('add and select item', function(assert) {
    testActionSelectsId.call(this, assert, function() {
        this.listAndDetailView.addItem($('<li id="four">Four</li>'), this.listAndDetailView.$listView.find('#one'), true);
    }, 'four');
});

QUnit.test('add item', function(assert) {
    testActionSelectsId.call(this, assert, function() {
        // Override the expectation set in testActionSelectsId
        assert.expect(9);
        this.listAndDetailView.addItem($('<li id="four">Four</li>'), this.listAndDetailView.$listView.find('#one'), true);
        const $item = this.listAndDetailView.$listView.find('#four');
        assert.strictEqual($item.length, 1, 'Item appended');
        assert.ok(!$item.hasClass('offScreen'));
    }, 'four');
});

// @Ignore - This test requires CSS to be loaded, which we currently don't do
//QUnit.test('remove item selects next', function(assert) {
//    const done =  assert.async();
//    assert.expect(2);
//
//    var $item = this.listAndDetailView.$listView.find('#one');
//    var $next = $item.next();
//
//    this.listAndDetailView.selectHandler = function($li) {
//        assert.strictEqual($li[0].id, $next[0].id);
//    };
//
//    this.listAndDetailView.removeItem($item, 'li').done(function() {
//        assert.ok($next.hasClass('selected'));
//        done();
//    });
//});

function testActionSelectsId(assert, action, id) {
    assert.expect(7);

    this.listAndDetailView.selectHandler = function($li, $listView, $detailView, e) {
        assert.strictEqual($li.length, 1);
        assert.ok($li[0] === e.currentTarget);
        assert.strictEqual($li.attr('id'), id);
        assert.strictEqual($listView.children("#items").length, 1, "List view is the parent element of listContent");
        assert.strictEqual($detailView.children("#details").length, 1, "Detail view is the parent element of detailContent");
    };

    action.call(this);
    assert.strictEqual(this.listAndDetailView.$listView.find("#" + id + ".selected").length, 1);
    assert.strictEqual(this.listAndDetailView.$listView.find("#two.selected").length, 0);
}
