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


@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;


  constructor(@Host() private map: MapComponent) {
    
  }

  ngOnInit() {
    this.ol3d = new OLCesium({ map: this.map.instance }); // ol2dMap is the ol.Map instance
  }

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