import OverlayControl from '../../helix/javascript/array_summary/overlay_control';
import $ from 'jquery';
import 'jasmine-jquery';

describe('Overlay controls', function () {
  let htmlContent = '<div id="toggle_buttons"><div id="anchor_overlay" class="overlay_toggle"></div>' +
    '<div id="all_overlay" class="overlay_toggle"></div></div>';

  let legendContent = '<div id="legend_container"><img class="legend anchors_mode"><img class="legend all_mode"></div>';
  let visualizationSpy;
  let subject;

  beforeEach(function () {
    setFixtures(htmlContent + legendContent);
    visualizationSpy = jasmine.createSpyObj('arrayVisualization', ['setOverlay']);
    subject = new OverlayControl(visualizationSpy);
    subject.init($('#toggle_buttons'), $('#legend_container'));
  });

  describe("the default state", function () {
    it("sets the anchors overlay", function () {
      expect(visualizationSpy.setOverlay).toHaveBeenCalledWith('ANCHOR');
      expect($('#anchor_overlay')).toHaveClass('overlay_active');
    });

    it("unselects the other buttons", function () {
      expect($('#all_overlay')).not.toHaveClass('overlay_active');
    });

    it("hides the 'all' legend", function () {
      expect($('img.all_mode')).toBeHidden();
    });

    it("shows the 'anchors' legend", function () {
      expect($('img.anchors_mode')).not.toBeHidden();
    });
  });

  describe("clicking the all button", function () {
    beforeEach(function () {
      $('#all_overlay').click();
    });
    it("sets the all overlay", function () {
      expect(visualizationSpy.setOverlay).toHaveBeenCalledWith('ALL');
      expect($('#all_overlay')).toHaveClass('overlay_active');
    });

    it("unselects the other buttons", function () {
      expect($('#anchor_overlay')).not.toHaveClass('overlay_active');
    });

    it("shows the 'all' legend", function () {
      expect($('img.all_mode')).not.toBeHidden();
    });

    it("hides the 'anchors' legend", function () {
      expect($('img.anchors_mode')).toBeHidden();
    });
  });

  describe("clicking the anchor button", function () {
    beforeEach(function () {
      $('#all_overlay').click();
      visualizationSpy.setOverlay.calls.reset();
      $('#anchor_overlay').click();
    });
    it("sets the anchors overlay", function () {
      expect(visualizationSpy.setOverlay).toHaveBeenCalledWith('ANCHOR');
      expect($('#anchor_overlay')).toHaveClass('overlay_active');
    });

    it("unselects the other buttons", function () {
      expect($('#all_overlay')).not.toHaveClass('overlay_active');
    });

    it("hides the 'all' legend", function () {
      expect($('img.all_mode')).toBeHidden();
    });

    it("shows the 'anchors' legend", function () {
      expect($('img.anchors_mode')).not.toBeHidden();
    });
  });
});