import { Component, OnInit,Input,Host  } from '@angular/core';
import { OldCircularArc } from 'arcgis-rest-api';
import { Map } from 'ol';
import { Interaction} from 'ol/interaction';
import { MapComponent } from 'ngx-openlayers';
import OLCesium from 'ol-cesium';

declare var olcs: any;

@Component({
  selector: 'fm-map3d-switch2d3d',
  templateUrl: './switch2d3d.component.html',
  styleUrls: ['./switch2d3d.component.scss']
})
export class Switch2D3DComponent {

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


  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)
        ];
        this.loading=false;
        return this.synchronizers;
    }, stopOpenLayersEventsPropagation:true}); 
    this.ol3d.warmUp(3000,5000);
  }

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

  disableInteractions() {
      this.interactions=[];
      this.map.instance.getInteractions().forEach((i) => {
        if(i.getActive()) {
          this.interactions.push(i);
          i.setActive(false);
        }
      });
  }

  enableInteractions() {
    this.interactions.forEach((i) => {
      i.setActive(true);
    });
  }

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