import { Component, Host, Input, OnInit, OnChanges, SimpleChanges, forwardRef } from '@angular/core';
import { ViewComponent, MapComponent } from 'ngx-openlayers';

 
@Component({
  selector: 'fm-map-zoom-to-extent',
  template: `<ng-content></ng-content>`
})
export class ZoomToExtentComponent implements OnChanges {
  view: ViewComponent;
  map: MapComponent;
  @Input() extent: number[];
  @Input() animate: boolean = false;

  constructor(@Host() view: ViewComponent, @Host() map: MapComponent) {
    this.view = view;
    this.map = map;
  }

  ngOnChanges(changes: SimpleChanges) {
    if (this.extent) {
      var options = { padding: [0, 0, 0, 0],minResolution:1 };
      let size = this.map.instance.getSize();
      let rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
      let threshold = 40 * rem;
      var left = 1 * rem;
      var right = 1 * rem;
      var bottom = Math.round((size[1] / 2) + (4*rem));
      var top = 1 * rem;
      if (size[0] > threshold) {
        bottom = 5 * rem;
        left = 23 * rem;
      }
      options.padding = [top, right, bottom, left];
      if (this.animate) options["duration"] = 1000;
      this.view.instance.fit(this.extent, options);
    }
  }
}