/* global AJS:false */
AJS.test.require("com.atlassian.bitbucket.server.bitbucket-web:list-and-detail-view", function() {
    var ListAndDetailView = require('bitbucket/internal/widget/list-and-detail-view');

    var $ = jQuery;

    module('list-and-detail-view', {
        setup : function() {
            var self = this;

            this.$listAndDetailView = $(bitbucket.internal.widget.listAndDetailView({
                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>'
            })).appendTo('#qunit-fixture');

            this.listAndDetailView = new ListAndDetailView(this.$listAndDetailView, function() {
                return self.selectionHandler.apply(this, arguments);
            }, { selectedClass : 'selected' });
        },
        teardown : function() {
            this.$listAndDetailView.remove();
            this.$listAndDetailView = null;

            this.listAndDetailView.destroy();
            this.listAndDetailView = null;

            this.selectionHandler = null;
        }
    });

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

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

    }

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

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

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

    test('add item', function () {
       this.listAndDetailView.addItem($('<li id="four">Four</li>'), this.listAndDetailView.$listView.find('#one'));

        var $item = this.listAndDetailView.$listView.find('#four');
        strictEqual($item.length, 1, 'Item appended');
        ok(!$item.hasClass('offScreen'));
    });

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

    test('remove item selects next', function () {
        this.selectionHandler = function ($li) {
            strictEqual($li[0].id, $next[0].id);
        };
        var $item = this.listAndDetailView.$listView.find('#one');
        var $next = $item.next();
        this.listAndDetailView.removeItem($item).done(function () {
            ok($next.hasClass('selectedItem'));
        });
    });
});
