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

@Directive({
  selector: '[fmMapIfZoomToShow]',
})
export class ifZoomToShowDirective  implements OnInit {
  @Input() 
  set fmMapIfZoomToShow(layer:Layer<Source>) {
    this.layer$=layer;
    this.checkZoom();
  }

  @Input() 
  set fmMapIfZoomToShowThen(templateRef: TemplateRef<any>) {
    this.thenTemplate$ = templateRef;
    this.checkZoom();
  }

  @Input() 
  set fmMapIfZoomToShowElse(templateRef: TemplateRef<any>) {
    this.elseTemplate$ = templateRef;
    this.checkZoom();
  }
  
  private layer$:Layer<Source>;
  private thenTemplate$:TemplateRef<any>;
  private elseTemplate$:TemplateRef<any>;
  private showView = false;

  constructor(private templateRef$: TemplateRef<any>,private viewContainerRef$: ViewContainerRef,private map$: MapComponent) { 
    this.thenTemplate$ = templateRef$;
    this.checkZoom();
  }

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

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