(function($) {
  module('List view', {
    setup: function() {
      $.fx.off = true;
    }
  });

  test('Basic', function() {
    var listView = {
      listView: {
        section: 'test123',
        fields: {
          fieldA: { label: 'testFieldA' },
          fieldB: { label: 'testFieldB' }
        },
        dataProvider: function(args) {
          args.response.success({
            data: []
          });
        }
      }
    };
    var $listView;

    ok($listView = $('<div>').listView(listView), 'Initialize list view');
    equal($listView.find('.list-view').size(), 1, 'List view has container div');
    equal($listView.find('.list-view.test123').size(), 1, 'Container div has section ID as CSS class');
    equal($listView.find('.list-view table').size(), 2, 'List view has split tables');
    equal($listView.find('.list-view .fixed-header table thead tr').size(), 1, 'List view has fixed table header');
    equal($listView.find('.list-view .fixed-header table thead th').size(), 2, 'List view has correct column headers');
    equal($listView.find('.list-view .fixed-header table thead th:first').html(), 'testFieldA', 'First header has correct label');
    ok($listView.find('.list-view .fixed-header table thead th:first').hasClass('fieldA'), 'First header has correct class');
    ok($listView.find('.list-view .fixed-header table thead th:last').hasClass('fieldB'), 'First header has correct class');
    equal($listView.find('.list-view .fixed-header table thead th:last').html(), 'testFieldB', 'First header has correct label');
    equal($listView.find('.list-view table tbody tr').size(), 1, 'List view has table body');
    equal($listView.find('.toolbar').size(), 1, 'List view has toolbar');
    equal($listView.find('.toolbar .text-search .search-bar input[type=text]').size(), 1, 'Toolbar has search box');
    equal($listView.find('.toolbar .text-search .search-bar input[type=text]').size(), 1, 'Toolbar has search box');
    equal($listView.find('.toolbar .text-search .button.search').size(), 1, 'Toolbar has search button');
    ok(!$listView.find('.toolbar .filters').size(), 'Toolbar doesn\'t have filters');
  });

  test('Data provider', function() {
    var $listView = $('<div>');
    
    stop();
    $listView.listView({
      context: {
        tests: []
      },
      listView: {
        section: 'test',
        fields: {
          fieldA: { label: 'testFieldA' },
          fieldB: { label: 'testFieldB' }
        },
        dataProvider: function(args) {
          start();
          equal(args.page, 1, 'Correct page # passed');
          equal(args.filterBy.search.value, '', 'No search params specified');
          ok($.isArray(args.context.tests), 'Context passed');
          args.response.success({
            data: [
              {
                fieldA: '1A',
                fieldB: '1B'
              },
              {
                fieldA: '2A',
                fieldB: '2B'
              },
              {
                fieldA: '3A',
                fieldB: '3B'
              }
            ]
          });
          stop();
          setTimeout(function() {
            start();
            equal($listView.find('tbody tr').size(), 3, 'Data row count is correct');
            equal($listView.find('tbody tr:first td.fieldA span').html(), '1A', 'Correct table item value for first row');
            equal($listView.find('tbody tr:first td.fieldB span').html(), '1B', 'Correct table item value for first row');
            equal($listView.find('tbody tr:last td.fieldA span').html(), '3A', 'Correct table item value for last row');
            equal($listView.find('tbody tr:last td.fieldB span').html(), '3B', 'Correct table item value for last row');
          });
        }
      }
    });
  });

  test('Pre-filter', function() {
    var $listView = $('<div>');
    
    stop();
    $listView.listView({
      listView: {
        section: 'test',
        fields: {
          fieldA: { label: 'testFieldA' },
          fieldB: { label: 'testFieldB' },
          fieldC: { label: 'testFieldC' }
        },
        preFilter: function(args) {
          return ['fieldC'];
        },
        dataProvider: function(args) {
          args.response.success({
            data: [
              {
                fieldA: '1A',
                fieldB: '1B',
                fieldC: '1C'
              }
            ]
          });
          setTimeout(function() {
            start();
            equal($listView.find('thead th').size(), 2, 'Correct # of filtered columns present');
            equal($listView.find('tbody tr:first td').size(), 2, 'Correct # of body columns present');
            equal($listView.find('tbody tr:first td.fieldA span').html(), '1A', 'Correct table item value for data row');
            equal($listView.find('tbody tr:first td.fieldB span').html(), '1B', 'Correct table item value for data row');
          });
        }
      }
    });
  });

  test('Section select', function() {
    var $listView = $('<div>');
    
    ok($listView.listView({
      sectionSelect: {
        label: 'testSectionSelect'
      },
      sections: {
        sectionA: {
          type: 'select',
          title: 'sectionA',
          listView: {
            fields: {
              fieldA: { label: 'testFieldA' },
              fieldB: { label: 'testFieldB' }
            },
            dataProvider: function(args) {
              args.response.success({
                data: [
                  {
                    fieldA: '1A',
                    fieldB: '1B'
                  },
                  {
                    fieldA: '2A',
                    fieldB: '2B'
                  }
                ]
              });
            }
          }  
        },
        
        sectionB: {
          type: 'select',
          title: 'sectionB',
          listView: {
            fields: {
              fieldC: { label: 'testFieldC' },
              fieldD: { label: 'testFieldD' },
              fieldE: { label: 'testFieldE' }
            },
            dataProvider: function(args) {
              args.response.success({
                data: [
                  {
                    fieldC: '1C',
                    fieldD: '1D',
                    fieldE: '1E'
                  },
                  {
                    fieldC: '2C',
                    fieldD: '2D',
                    fieldE: '2E'
                  },
                  {
                    fieldC: '3C',
                    fieldD: '3D',
                    fieldE: '3E'
                  },
                  {
                    fieldC: '4C',
                    fieldD: '4D',
                    fieldE: '4E'
                  }
                ]
              });
            }
          }
        }
      }
    }));

    equal($listView.find('.toolbar .section-switcher').size(), 1,
          'Section switcher present in toolbar');
    equal($listView.find('.toolbar .section-switcher .section-select select').size(), 1,
          'Section select present');
    equal($listView.find('.toolbar .section-switcher .section-select label').html(),
          'testSectionSelect' + ':',
          'Section select label is correct');
    equal($listView.find('.toolbar .section-switcher .section-select select option').size(), 2,
          'Selectable sections present as options');
    equal($listView.find('.toolbar .section-switcher .section-select select option:first').html(), 'sectionA',
          'First select has correct title');
    equal($listView.find('.toolbar .section-switcher .section-select select option:selected')[0],
          $listView.find('.toolbar .section-switcher .section-select select option:first')[0],
          'First section option is selected by default');
    equal($listView.find('.toolbar .section-switcher .section-select select option:last').html(), 'sectionB', 'Last select has correct title');
    equal($listView.find('.list-view thead th').size(), 2, 'Correct list view column count present');
    equal($listView.find('.list-view thead th:first').html(), 'testFieldA', 'Column 1 is labeled correctly');
    equal($listView.find('.list-view thead th:last').html(), 'testFieldB', 'Column 2 is labeled correctly');
    equal($listView.find('.list-view tbody tr').size(), 2, 'Correct # of data rows present');
    equal($listView.find('.list-view tbody tr:first td').size(), 2, 'Correct # of data columns present');
    
    $listView.find('.toolbar .section-switcher select').val('sectionB');
    stop();
    ok($listView.find('.toolbar .section-switcher select').change(), 'Change section');
    start();
    
    equal($listView.find('.list-view thead th').size(), 3, 'Correct list view column count present');
    equal($listView.find('.list-view thead th:first').html(), 'testFieldC', 'Column 1 is labeled correctly');
    equal($($listView.find('.list-view thead th')[1]).html(), 'testFieldD', 'Column 2 is labeled correctly');
    equal($listView.find('.list-view thead th:last').html(), 'testFieldE', 'Column 3 is labeled correctly');
    equal($listView.find('.list-view tbody tr').size(), 4, 'Correct # of data rows present');
    equal($listView.find('.list-view tbody tr:first td').size(), 3, 'Correct # of data columns present');
    equal($listView.find('.list-view tbody tr:first td:first span').html(), '1C', 'First table cell has correct data');
    equal($listView.find('.list-view tbody tr:last td:last span').html(), '4E', 'Last table cell has correct data');

    $listView.find('.toolbar .section-switcher select').val('sectionA');
    stop();
    ok($listView.find('.toolbar .section-switcher select').change(), 'Change section');
    start();
    equal($listView.find('.toolbar .section-switcher .section-select select option:last').html(), 'sectionB', 'Last select has correct title');
    equal($listView.find('.list-view thead th').size(), 2, 'Correct list view column count present');
    equal($listView.find('.list-view thead th:first').html(), 'testFieldA', 'Column 1 is labeled correctly');
    equal($listView.find('.list-view thead th:last').html(), 'testFieldB', 'Column 2 is labeled correctly');
    equal($listView.find('.list-view tbody tr').size(), 2, 'Correct # of data rows present');
    equal($listView.find('.list-view tbody tr:first td').size(), 2, 'Correct # of data columns present');
    equal($listView.find('.list-view tbody tr:first td:first span').html(), '1A', 'First table cell has correct data');
    equal($listView.find('.list-view tbody tr:last td:last span').html(), '2B', 'Last table cell has correct data');
  });

  test('Actions', function() {
    var $listView = $('<div>');
    var listView = {
      listView: {
        section: 'test123',
        fields: {
          fieldA: { label: 'testFieldA' },
          fieldB: { label: 'testFieldB' }
        },
        actions: {
          basicSync: {
            label: 'basicAction',
            messages: {
              confirm: function() {
                return 'basicActionConfirm';
              },
              notification: function() {
                return 'basicActionNotification';
              }
            },
            action: function(args) {
              args.response.success();
            }
          }
        },
        dataProvider: function(args) {
          args.response.success({
            data: [
              {
                fieldA: '1A',
                fieldB: '1B',
                fieldC: '1C'
              },
              {
                fieldA: '2A',
                fieldB: '2B',
                fieldC: '2C'
              }
            ]
          });
        }
      }
    };
    
    ok($listView.listView(listView), 'Initialize list view');
    equal($listView.find('table thead th').size(), 3, 'Correct header column count');
    equal($listView.find('table thead th.actions').size(), 1, 'Action header column present');
    equal($listView.find('table tbody tr:first td').size(), 3, 'Correct data column count');
    equal($listView.find('table tbody tr:first td.actions').size(), 1, 'Action data column present');
    equal($listView.find('table tbody tr:first td.actions .action').size(), 1, 'Correct action count');
    equal($listView.find('table tbody tr:first td.actions .action:first .icon').size(), 1, 'Action has icon');
    ok($listView.find('table tbody tr:first td.actions .action:first').hasClass('basicSync'),
       'First action has ID as CSS class');
  });
}(jQuery));