import { Directive, ViewContainerRef,TemplateRef,OnInit,Input, OnChanges } from '@angular/core';
import { layer } from 'ol';
import { MapComponent } from 'ngx-openlayers';

@Directive({
  selector: '[fm-map-ifZoomToShow]',
})
export class ifZoomToShowDirective  implements OnInit,OnChanges {
  @Input('fm-map-ifZoomToShow') layer$:layer;

  constructor(private templateRef$: TemplateRef<any>,private viewContainerRef$: ViewContainerRef,private map$: MapComponent) { }
  private showView = false;

  ngOnInit() {    
    this.map$.instance.on('moveend', (e) => {
      this.checkZoom();     
    });
  }

  ngOnChanges() {
    this.checkZoom();
  }

  checkZoom() {
    if(this.layer$ && this.map$.instance) {
      let minZoom = this.layer$.getMinZoom();
      let currentZoom = this.map$.instance.getView().getZoom();
      let view = currentZoom < minZoom;
      if(view!= this.showView) {
        this.showView=view;
        if ( !this.showView) {
          this.viewContainerRef$.clear();
        } else {
          this.viewContainerRef$.createEmbeddedView(this.templateRef$);
        }  
      }      
    }      
  }
}