import ZoomControl from '../../helix/javascript/array_summary/zoom_control';
import $ from 'jquery';
import 'jasmine-jquery';

describe('Zoom Controls', function () {
  var htmlContent = '<div id="zoom_level"></div>';
  htmlContent += '<div id="decrease_zoom">-</div>';
  for (let i = 0; i < 7; i++) {
    htmlContent += '<div id="zoom_indicator_' + i + '"></div>';
  }
  htmlContent += '<div id="increase_zoom">+</div>';

  var visualizationSpy = jasmine.createSpyObj('arrayVisualization', ['setZoom']);
  let subject;

  beforeEach(function () {
    setFixtures(htmlContent);
    subject = new ZoomControl(visualizationSpy);
    subject.init($('*'));
  });

  it("sets the default zoom", function () {
    expect(visualizationSpy.setZoom).toHaveBeenCalledWith(1);
    expect(subject.zoomLevel).toEqual(0);
    expect($("#zoom_indicator_0")).toHaveClass("zoom_active");
    expect($("#zoom_level")).toHaveText("0%");
  });

  describe("clicking on the increase/decrease-zoom buttons", function () {
    beforeEach(function () {
      subject.setZoom(3, $('*'));
    });

    describe("clicking the increase-zoom button", function () {
      beforeEach(function () {
        $("#increase_zoom").click();
      });

      it("increases zoom by one level", function () {
        expect(visualizationSpy.setZoom).toHaveBeenCalledWith(5);
      });

      it("changes the zoom_level stack", function () {
        expect($("#zoom_level")).toHaveText("67%");
      });

      it("sets the zoom indicator properly", function () {
        expect($("#zoom_indicator_4")).toHaveClass("zoom_active");
        for (let i = 0; i < 7; i++) {
          if (i != 4) {
            expect($("#zoom_indicator_" + i)).not.toHaveClass("zoom_active");
          }
        }
      });
    });
    describe("clicking the decrease-zoom button", function () {
      beforeEach(function () {
        $("#decrease_zoom").click();
      });

      it("decreases zoom by one level", function () {
        expect(visualizationSpy.setZoom).toHaveBeenCalledWith(3);
      });

      it("changes the zoom_level stack", function () {
        expect($("#zoom_level")).toHaveText("33%");
      });

      it("sets the zoom indicator properly", function () {
        expect($("#zoom_indicator_2")).toHaveClass("zoom_active");
        for (let i = 0; i < 7; i++) {
          if (i != 2) {
            expect($("#zoom_indicator_" + i)).not.toHaveClass("zoom_active");
          }
        }
      });
    });
  });

  describe("when zoomed-out all the way", function () {
    beforeEach(function () {
      subject.setZoom(0, $('*'));
    });

    describe("clicking the increase-zoom button", function () {
      beforeEach(function () {
        $("#increase_zoom").click();
      });

      it("increases zoom by one level", function () {
        expect(visualizationSpy.setZoom).toHaveBeenCalledWith(2);
      });

      it("changes the zoom_level stack", function () {
        expect($("#zoom_level")).toHaveText("17%");
      });

      it("sets the zoom indicator properly", function () {
        expect($("#zoom_indicator_1")).toHaveClass("zoom_active");
        for (let i = 0; i < 7; i++) {
          if (i != 1) {
            expect($("#zoom_indicator_" + i)).not.toHaveClass("zoom_active");
          }
        }
      });
    });

    describe("clicking the decrease-zoom button", function () {
      beforeEach(function () {
        $("#decrease_zoom").click();
      });

      it("does nothing", function () {
        expect(visualizationSpy.setZoom).not.toHaveBeenCalledWith(0);
      });

      it("does not change the zoom_level stack", function () {
        expect($("#zoom_level")).toHaveText("0%");
      });

      it("does not change the zoom indicator", function () {
        expect($("#zoom_indicator_0")).toHaveClass("zoom_active");
        for (let i = 0; i < 7; i++) {
          if (i != 0) {
            expect($("#zoom_indicator_" + i)).not.toHaveClass("zoom_active");
          }
        }
      });
    });
  });

  describe("when zoomed-in all the way", function () {
    beforeEach(function () {
      subject.setZoom(6, $('*'));
    });

    describe("clicking the increase-zoom button", function () {
      beforeEach(function () {
        $("#increase_zoom").click();
      });

      it("does nothing", function () {
        expect(visualizationSpy.setZoom).not.toHaveBeenCalledWith(8);
      });

      it("changes the zoom_level stack", function () {
        expect($("#zoom_level")).toHaveText("100%");
      });

      it("does not change the zoom indicator", function () {
        expect($("#zoom_indicator_6")).toHaveClass("zoom_active");
        for (let i = 0; i < 7; i++) {
          if (i != 6) {
            expect($("#zoom_indicator_" + i)).not.toHaveClass("zoom_active");
          }
        }
      });
    });

    describe("clicking the decrease-zoom button", function () {
      beforeEach(function () {
        $("#decrease_zoom").click();
      });

      it("decreases the zoom by one level", function () {
        expect(visualizationSpy.setZoom).toHaveBeenCalledWith(6);
      });

      it("changes the zoom_level stack", function () {
        expect($("#zoom_level")).toHaveText("83%");
      });

      it("does not change the zoom indicator properly", function () {
        expect($("#zoom_indicator_5")).toHaveClass("zoom_active");
        for (let i = 0; i < 7; i++) {
          if (i != 5) {
            expect($("#zoom_indicator_" + i)).not.toHaveClass("zoom_active");
          }
        }
      });
    });
  });

  describe("clicking on one of the zoom-indicator buttons", function () {
    beforeEach(function () {
      $("#zoom_indicator_4").click();
    });

    it("goes directly to that zoom level", function () {
      expect(visualizationSpy.setZoom).toHaveBeenCalledWith(5);
    });

    it("changes the zoom_level stack", function () {
      expect($("#zoom_level")).toHaveText("67%");
    });

    it("sets the zoom indicator properly", function () {
      expect($("#zoom_indicator_4")).toHaveClass("zoom_active");
      for (let i = 0; i < 7; i++) {
        if (i != 4) {
          expect($("#zoom_indicator_" + i)).not.toHaveClass("zoom_active");
        }
      }
    });
  });
});