import SubarrayDisplay from '../../helix/javascript/array_summary/subarray_display';
import $ from 'jquery';
import 'jasmine-jquery';

describe('Subarray Display', function () {
  let htmlContent = '<table class="summary_table">' +
    '<tr><th>Subarray</th><th>0</th><th>1</th></tr>' +
    '<tr id="needed_anchors"><th>Seismic Anchors Needed</th><td>0</td><td>0</td></tr>' +
    '<tr id="current_anchors"><th>Seismic Anchors Current</th><td>0</td><td>0</td></tr>' +
    '<tr id="subarray_weight"><th>Weight</th><td>0</td><td>0</td></tr>' +
    '</table>';

  let panelData = [
    {'x': 1, 'y': 1, 'width': 1, 'height': 1, 'data': {'subarray': 0, 'seismic_anchors': 3}},
    {'x': 1, 'y': 2, 'width': 1, 'height': 1, 'data': {'subarray': 1, 'seismic_anchors': 2}},
    {'x': 1, 'y': 1, 'width': 1, 'height': 1, 'data': {'subarray': 1, 'seismic_anchors': 0}},
    {'x': 2, 'y': 1, 'width': 1, 'height': 1, 'data': {'subarray': 0, 'seismic_anchors': 1}},
    {'x': 2, 'y': 2, 'width': 1, 'height': 1, 'data': {'subarray': 0, 'seismic_anchors': 0}}
  ];

  let subject;

  beforeEach(function () {
    setFixtures(htmlContent);
    let existingPanelData = [
      {'x': 1, 'y': 1, 'width': 1, 'height': 1, 'data': {'subarray': 0, 'seismic_anchors': 1}},
      {'x': 1, 'y': 2, 'width': 1, 'height': 1, 'data': {'subarray': 1, 'seismic_anchors': 1}},
      {'x': 1, 'y': 1, 'width': 1, 'height': 1, 'data': {'subarray': 1, 'seismic_anchors': 0}},
      {'x': 2, 'y': 1, 'width': 1, 'height': 1, 'data': {'subarray': 0, 'seismic_anchors': 1}},
      {'x': 2, 'y': 2, 'width': 1, 'height': 1, 'data': {'subarray': 0, 'seismic_anchors': 0}}
    ];
    subject = new SubarrayDisplay();
    subject.init($('#current_anchors'), $('#needed_anchors'), $('#subarray_weight'), existingPanelData);
  });

  it("updates the display table", function () {
    expect($('#current_anchors').find('td:nth-child(2)')).toHaveText(2);
    expect($('#current_anchors').find('td:nth-child(3)')).toHaveText(1);
  });

  describe("when the seismic anchor count is modified", function () {
    beforeEach(function () {
      subject.didModifyPanels(panelData);
    });

    it("updates the table row to show how many currently assigned seismic anchors there are", function () {
      expect($('#current_anchors').find('td:nth-child(2)')).toHaveText(4);
      expect($('#current_anchors').find('td:nth-child(3)')).toHaveText(2);
    });
  });

  describe("when the other subarray data is modified", function () {
    beforeEach(function () {
      subject.didUpdateSubarrayData([
        {
          subarray: 0,
          weight: 971.53,
          required_seismic_anchors: 0
        },
        {
          subarray: 1,
          weight: 1000,
          required_seismic_anchors: 1
        }
      ]);
    });

    it("updates the needed anchors row for the given subarrays", function () {
      expect($("#needed_anchors").find('td:nth-child(2)')).toHaveText(0);
      expect($("#needed_anchors").find('td:nth-child(3)')).toHaveText(1);
    });

    it("updates the weight row for the given subarrays", function () {
      expect($("#subarray_weight").find('td:nth-child(2)')).toHaveText('971.53');
      expect($("#subarray_weight").find('td:nth-child(3)')).toHaveText('1,000');
    });
  });
});