/* global QUnit, SelectBox */
'use strict';

QUnit.module('admin.SelectBox');

QUnit.test('init: no options', function(assert) {
    const $ = django.jQuery;
    $('<select id="id"></select>').appendTo('#qunit-fixture');
    SelectBox.init('id');
    assert.equal(SelectBox.cache.id.length, 0);
});

QUnit.test('filter', function(assert) {
    const $ = django.jQuery;
    $('<select id="id"></select>').appendTo('#qunit-fixture');
    $('<option value="0">A</option>').appendTo('#id');
    $('<option value="1">B</option>').appendTo('#id');
    SelectBox.init('id');
    assert.equal($('#id option').length, 2);
    SelectBox.filter('id', "A");
    assert.equal($('#id option').length, 1);
    assert.equal($('#id option').text(), "A");
});

QUnit.test('preserve scroll position', function(assert) {
    const $ = django.jQuery;
    const optionsCount = 100;
    $('<select id="from_id" multiple></select>').appendTo('#qunit-fixture');
    $('<select id="to_id" multiple></select>').appendTo('#qunit-fixture');
    const fromSelectBox = document.getElementById('from_id');
    const toSelectBox = document.getElementById('to_id');
    for (let i = 0; i < optionsCount; i++) {
        fromSelectBox.appendChild(new Option());
    }
    SelectBox.init('from_id');
    SelectBox.init('to_id');
    const selectedOptions = [97, 98, 99];
    for (const index of selectedOptions) {
        fromSelectBox.options[index].selected = true;
        fromSelectBox.options[index].scrollIntoView();
    }
    assert.equal(fromSelectBox.options.length, optionsCount);
    SelectBox.move('from_id', 'to_id');
    assert.equal(fromSelectBox.options.length, optionsCount - selectedOptions.length);
    assert.equal(toSelectBox.options.length, selectedOptions.length);
    assert.notEqual(fromSelectBox.scrollTop, 0);
});

QUnit.test('retain optgroups', function(assert) {
    const $ = django.jQuery;
    $('<select id="id"></select>').appendTo('#qunit-fixture');
    const grp = $('<optgroup label="group one">').appendTo('#id');
    $('<option value="0">A</option>').appendTo(grp);
    $('</optgroup>').appendTo('#id');
    $('<option value="1">B</option>').appendTo('#id');
    SelectBox.init('id');
    SelectBox.redisplay('id');
    assert.equal($('#id option').length, 2);
    assert.equal($('#id optgroup').length, 1);
});

QUnit.test('sort optgroups', function(assert) {
    const $ = django.jQuery;
    $('<select id="id"></select>').appendTo('#qunit-fixture');
    // Add optgroups in non-alphabetical order
    const grp2 = $('<optgroup label="Group B">').appendTo('#id');
    $('<option value="3">Item 3</option>').appendTo(grp2);
    $('<option value="4">Item 4</option>').appendTo(grp2);
    const grp1 = $('<optgroup label="Group A">').appendTo('#id');
    $('<option value="1">Item 1</option>').appendTo(grp1);
    $('<option value="2">Item 2</option>').appendTo(grp1);

    SelectBox.init('id');

    // Verify cache is sorted by group then by item
    assert.equal(SelectBox.cache.id.length, 4);
    assert.equal(SelectBox.cache.id[0].group, 'Group A');
    assert.equal(SelectBox.cache.id[0].text, 'Item 1');
    assert.equal(SelectBox.cache.id[1].group, 'Group A');
    assert.equal(SelectBox.cache.id[1].text, 'Item 2');
    assert.equal(SelectBox.cache.id[2].group, 'Group B');
    assert.equal(SelectBox.cache.id[2].text, 'Item 3');
    assert.equal(SelectBox.cache.id[3].group, 'Group B');
    assert.equal(SelectBox.cache.id[3].text, 'Item 4');
});

QUnit.test('do not sort when no optgroups', function(assert) {
    const $ = django.jQuery;
    $('<select id="id"></select>').appendTo('#qunit-fixture');
    // Add options in non-alphabetical order
    $('<option value="3">Zebra</option>').appendTo('#id');
    $('<option value="1">Apple</option>').appendTo('#id');
    $('<option value="2">Banana</option>').appendTo('#id');

    SelectBox.init('id');

    // Verify cache preserves original order (not sorted)
    assert.equal(SelectBox.cache.id.length, 3);
    assert.equal(SelectBox.cache.id[0].text, 'Zebra');
    assert.equal(SelectBox.cache.id[1].text, 'Apple');
    assert.equal(SelectBox.cache.id[2].text, 'Banana');
});

QUnit.test('move with optgroups sorts', function(assert) {
    const $ = django.jQuery;
    $('<select id="from_id"></select>').appendTo('#qunit-fixture');
    $('<select id="to_id"></select>').appendTo('#qunit-fixture');

    // Add options with optgroups to from_id in non-alphabetical order
    const grp2 = $('<optgroup label="Group B">').appendTo('#from_id');
    $('<option value="2">Item 2</option>').appendTo(grp2);
    const grp1 = $('<optgroup label="Group A">').appendTo('#from_id');
    $('<option value="1">Item 1</option>').appendTo(grp1);

    SelectBox.init('from_id');
    SelectBox.init('to_id');

    // Select and move item
    document.getElementById('from_id').options[0].selected = true;
    SelectBox.move('from_id', 'to_id');

    // Verify to_id cache is sorted (even though we only added one item)
    assert.equal(SelectBox.cache.to_id.length, 1);
    assert.equal(SelectBox.cache.to_id[0].group, 'Group B');
    assert.equal(SelectBox.cache.to_id[0].text, 'Item 2');
});

QUnit.test('move without optgroups does not sort', function(assert) {
    const $ = django.jQuery;
    $('<select id="from_id"></select>').appendTo('#qunit-fixture');
    $('<select id="to_id"></select>').appendTo('#qunit-fixture');

    // Add options without optgroups in non-alphabetical order
    $('<option value="3">Zebra</option>').appendTo('#from_id');
    $('<option value="1">Apple</option>').appendTo('#from_id');

    SelectBox.init('from_id');
    SelectBox.init('to_id');

    // Select and move first item (Zebra)
    document.getElementById('from_id').options[0].selected = true;
    SelectBox.move('from_id', 'to_id');

    // Verify to_id cache preserves order (not sorted)
    assert.equal(SelectBox.cache.to_id.length, 1);
    assert.equal(SelectBox.cache.to_id[0].text, 'Zebra');

    // Move second item (Apple)
    document.getElementById('from_id').options[0].selected = true;
    SelectBox.move('from_id', 'to_id');

    // Verify items are in order they were added, not alphabetical
    assert.equal(SelectBox.cache.to_id.length, 2);
    assert.equal(SelectBox.cache.to_id[0].text, 'Zebra');
    assert.equal(SelectBox.cache.to_id[1].text, 'Apple');
});

QUnit.test('move_all with optgroups sorts', function(assert) {
    const $ = django.jQuery;
    $('<select id="from_id"></select>').appendTo('#qunit-fixture');
    $('<select id="to_id"></select>').appendTo('#qunit-fixture');

    // Add options with optgroups in non-alphabetical order
    const grp2 = $('<optgroup label="Group B">').appendTo('#from_id');
    $('<option value="3">Zebra</option>').appendTo(grp2);
    const grp1 = $('<optgroup label="Group A">').appendTo('#from_id');
    $('<option value="1">Apple</option>').appendTo(grp1);
    $('<option value="2">Banana</option>').appendTo(grp1);

    SelectBox.init('from_id');
    SelectBox.init('to_id');

    // Move all items
    SelectBox.move_all('from_id', 'to_id');

    // Verify to_id cache is sorted by group
    assert.equal(SelectBox.cache.to_id.length, 3);
    assert.equal(SelectBox.cache.to_id[0].group, 'Group A');
    assert.equal(SelectBox.cache.to_id[0].text, 'Apple');
    assert.equal(SelectBox.cache.to_id[1].group, 'Group A');
    assert.equal(SelectBox.cache.to_id[1].text, 'Banana');
    assert.equal(SelectBox.cache.to_id[2].group, 'Group B');
    assert.equal(SelectBox.cache.to_id[2].text, 'Zebra');
});

QUnit.test('move_all without optgroups does not sort', function(assert) {
    const $ = django.jQuery;
    $('<select id="from_id"></select>').appendTo('#qunit-fixture');
    $('<select id="to_id"></select>').appendTo('#qunit-fixture');

    // Add options without optgroups in non-alphabetical order
    $('<option value="3">Zebra</option>').appendTo('#from_id');
    $('<option value="1">Apple</option>').appendTo('#from_id');
    $('<option value="2">Banana</option>').appendTo('#from_id');

    SelectBox.init('from_id');
    SelectBox.init('to_id');

    // Move all items
    SelectBox.move_all('from_id', 'to_id');

    // Verify to_id cache preserves original order (not sorted)
    assert.equal(SelectBox.cache.to_id.length, 3);
    assert.equal(SelectBox.cache.to_id[0].text, 'Zebra');
    assert.equal(SelectBox.cache.to_id[1].text, 'Apple');
    assert.equal(SelectBox.cache.to_id[2].text, 'Banana');
});