import $ from "jquery";

class ZoomControl {
  constructor(arrayVisualization) {
    this.visualization = arrayVisualization;
    this.zooms = [1, 2, 3, 4, 5, 6, 7];
    this.zoomLevel = 0;
  }

  init(zoomSelector) {
    let self = this;
    zoomSelector.find("#increase_zoom").click(function () {
      if (self.zoomLevel != (self.zooms.length - 1)) {
        self.setZoom(self.zoomLevel + 1, zoomSelector);
      }
    });

    zoomSelector.find("#decrease_zoom").click(function () {
      if (self.zoomLevel != 0) {
        self.setZoom(self.zoomLevel - 1, zoomSelector);
      }
    });

    for (let i = 0; i < self.zooms.length; i++) {
      zoomSelector.find("#zoom_indicator_" + i).click(function () {
        self.setZoom(i, zoomSelector);
      });
    }

    self.setZoom(0, zoomSelector);
  }

  setZoom(zoomLevel, zoomSelector) {
    const oldZoom = this.zoomLevel;
    const totalZooms = this.zooms.length;
    this.zoomLevel = zoomLevel % totalZooms;

    const zoom = this.zooms[this.zoomLevel];
    const zoom_percentage = Math.round((100 / (totalZooms - 1)) * this.zoomLevel);
    this.visualization.setZoom(zoom);

    zoomSelector.find("#zoom_indicator_" + oldZoom).removeClass("zoom_active");
    zoomSelector.find("#zoom_indicator_" + this.zoomLevel).addClass("zoom_active");
    zoomSelector.find("#zoom_level").text(zoom_percentage + "%");
  }
}

export default ZoomControl;