import { Component, OnInit,Input,Host  } from '@angular/core';
import { MapComponent } from 'ngx-openlayers';
import OLCesium from 'ol-cesium';

declare var olcs: any;

@Component({
  selector: 'fm-map3d-switch2d3d',
  template: '<div (click)="handleClick($event)" class="btn btn-outline-secondary twotreed">{{label}}</div>',
  styleUrls: ['./switch2d3d.component.scss']
})
export class Switch2D3DComponent {

  @Input() enable:boolean;
  public label: string = "3D";
  private ol3d: OLCesium;
  private synchronizers:any[];


  constructor(private map: MapComponent) {
    
  }

  ngOnInit() {   
   
    this.ol3d = new OLCesium({ map: this.map.instance, createSynchronizers: (map,scene) => {
        this.synchronizers = [
            new olcs.RasterSynchronizer(map,scene),
            new olcs.VectorSynchronizer(map,scene)
        ];
        return this.synchronizers;
    }, stopOpenLayersEventsPropagation:true}); 
  }

  synchronize() {
      this.synchronizers.forEach((synchronizer) => {
        synchronizer.synchronize();
      });
  }

  handleClick(event) {
    this.enable = !this.enable; 
    if(this.enable) {
        this.synchronize();
    }
    this.ol3d.setEnabled(this.enable);
    this.label = this.enable?"2D":"3D";    
  }
}