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-map-switch2d3d',
  template: '<div (click)="handleClick($event)" class="rounded-circle twotreed">{{label}}</div>',
  styles: [`.twotreed {
    width:2.5em;
    height:2.5em;
    background-color: white;
    text-align:center;
    line-height:2.5em;
    font-weight:bold;
    cursor:default;}`]

})
export class Switch2D3DComponent {

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


  constructor(@Host() 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";    
  }
}