import Ember from 'ember';
import { moduleForComponent, test } from 'ember-qunit';

moduleForComponent('ivy-tabs', {
  integration: true
});

var basicTemplate =
  '{{#ivy-tabs selected-index=selectedIndex}}' +
  '  {{#ivy-tab-list id="tablist"}}' +
  '    {{#ivy-tab id="tab1"}}tab 1{{/ivy-tab}}' +
  '    {{#ivy-tab id="tab2"}}tab 2{{/ivy-tab}}' +
  '  {{/ivy-tab-list}}' +
  '  {{#ivy-tab-panel id="panel1"}}panel 1{{/ivy-tab-panel}}' +
  '  {{#ivy-tab-panel id="panel2"}}panel 2{{/ivy-tab-panel}}' +
  '{{/ivy-tabs}}';

test('selects first tab by default', function(assert) {
  this.render(basicTemplate);

  assert.equal(this.get('selectedIndex'), 0, 'selected-index');
});

test('selects tab by index', function(assert) {
  this.set('selectedIndex', 1);
  this.render(basicTemplate);

  assert.equal(this.get('selectedIndex'), 1, 'selected-index');
});

test('selects tab on click', function(assert) {
  this.render(basicTemplate);
  this.$('#tab2').click();

  assert.equal(this.get('selectedIndex'), 1, 'selected-index');
});

test('selects tab on touchEnd', function(assert) {
  this.render(basicTemplate);
  this.$('#tab2').trigger('touchend');

  assert.equal(this.get('selectedIndex'), 1, 'selected-index');
});

test('WAI-ARIA attributes', function(assert) {
  this.render(basicTemplate);

  var tablist = this.$('#tablist');
  assert.equal(tablist.attr('aria-multiselectable'), 'false', 'tablist: aria-multiselectable');
  assert.equal(tablist.attr('role'), 'tablist', 'tablist: role');

  var tab = this.$('#tab1');
  assert.equal(tab.attr('role'), 'tab', 'tab1: role');
  assert.equal(tab.attr('aria-controls'), 'panel1', 'tab1: aria-controls');

  var tabpanel = this.$('#panel1');
  assert.equal(tabpanel.attr('role'), 'tabpanel', 'panel1: role');
  assert.equal(tabpanel.attr('aria-labelledby'), 'tab1', 'panel1: aria-labelledby');
});

test('selected tab attributes', function(assert) {
  this.render(basicTemplate);

  var tab = this.$('#tab1');
  assert.ok(tab.hasClass('active'), 'has "active" class');
  assert.equal(tab.attr('selected'), 'selected', 'selected');
  assert.equal(tab.attr('aria-selected'), 'true', 'aria-selected');
  assert.equal(tab.attr('aria-expanded'), 'true', 'aria-expanded');
  assert.equal(tab.attr('tabindex'), '0', 'tabindex');
});

test('selected panel attributes', function(assert) {
  this.render(basicTemplate);

  var panel = this.$('#panel1');
  assert.ok(panel.hasClass('active'), 'has "active" class');
  assert.ok(panel.is(':visible'), 'is visible');
});

test('deselected tab attributes', function(assert) {
  this.render(basicTemplate);

  var tab = this.$('#tab2');
  assert.ok(!tab.hasClass('active'), 'does not have "active" class');
  assert.equal(tab.attr('selected'), undefined, 'selected');
  assert.equal(tab.attr('aria-selected'), 'false', 'aria-selected');
  assert.equal(tab.attr('aria-expanded'), 'false', 'aria-expanded');
  assert.equal(tab.attr('tabindex'), undefined, 'tabindex');
});

test('deselected panel attributes', function(assert) {
  this.render(basicTemplate);

  var panel = this.$('#panel2');
  assert.ok(!panel.hasClass('active'), 'does not have "active" class');
  assert.ok(!panel.is(':visible'), 'is not visible');
});

var eachTemplate =
  '{{#ivy-tabs selected-index=selectedIndex}}' +
  '  {{#ivy-tab-list}}' +
  '    {{#each item in items}}' +
  '      {{#ivy-tab}}{{item}}{{/ivy-tab}}' +
  '    {{/each}}' +
  '  {{/ivy-tab-list}}' +
  '  {{#each item in items}}' +
  '    {{#ivy-tab-panel}}{{item}}{{/ivy-tab-panel}}' +
  '  {{/each}}' +
  '{{/ivy-tabs}}';

test('selects previous tab if active tab is removed', function(assert) {
  this.set('selectedIndex', 1);
  this.set('items', Ember.A(['Item 1', 'Item 2']));
  this.render(eachTemplate);

  Ember.run(this, function() {
    this.get('items').removeAt(1);
  });

  assert.equal(this.get('selectedIndex'), 0, 'previous tab became active');
});

test('selects first tab if all tabs are replaced', function(assert) {
  this.set('selectedIndex', 1);
  this.set('items', Ember.A(['Item 1', 'Item 2']));
  this.render(eachTemplate);

  Ember.run(this, function() {
    this.set('items', Ember.A(['Item 3', 'Item 4']));
  });

  assert.equal(this.get('selectedIndex'), 0, 'first tab became active');
});

test('arrow keys navigate between tabs', function(assert) {
  this.render(basicTemplate);

  var tab1 = this.$('#tab1');
  var tab2 = this.$('#tab2');

  Ember.run(tab1, 'trigger', Ember.$.Event('keydown', { keyCode: 37 }));
  assert.equal(this.get('selectedIndex'), 1, 'left arrow - tab2 is selected');
  assert.ok(tab2.get(0) === document.activeElement, 'tab2 has focus');

  Ember.run(tab2, 'trigger', Ember.$.Event('keydown', { keyCode: 38 }));
  assert.equal(this.get('selectedIndex'), 0, 'up arrow - tab1 is selected');
  assert.ok(tab1.get(0) === document.activeElement, 'tab1 has focus');

  Ember.run(tab1, 'trigger', Ember.$.Event('keydown', { keyCode: 39 }));
  assert.equal(this.get('selectedIndex'), 1, 'right arrow - tab2 is selected');
  assert.ok(tab2.get(0) === document.activeElement, 'tab2 has focus');

  Ember.run(tab2, 'trigger', Ember.$.Event('keydown', { keyCode: 40 }));
  assert.equal(this.get('selectedIndex'), 0, 'down arrow - tab1 is selected');
  assert.ok(tab1.get(0) === document.activeElement, 'tab1 has focus');
});

@@ -3902,29 +3902,32 @@
 st('selects 
-first
+previous
  tab if all 
@@ -3927,27 +3927,40 @@
 if a
-ll
+ctive
  tab
+ i
 s 
-a
 re
+moved via
  replace
 d', 
@@ -3955,17 +3955,20 @@
  replace
-d
+ment
 ', funct
@@ -4169,18 +4169,8 @@
 m 3'
-, 'Item 4'
 %5D));
@@ -4223,21 +4223,24 @@
 '), 0, '
-first
+previous
  tab bec

Fix broken test for selecting previous tab on removal.