import { Component, Host, Input, OnInit, ChangeDetectorRef  } from '@angular/core';
import { ViewComponent, MapComponent } from 'ngx-openlayers';

import {View} from 'ol';



@Component({
  selector: 'fm-map-rotation-reset',
  templateUrl: './rotation-reset.component.html',
  styleUrls: ['./rotation-reset.component.scss']
})
export class RotationResetComponent implements OnInit {
  view: View;

  public Rotation() {
    const rotation =  this.view ? this.view.getRotation() : 0;
    return `rotate(${rotation}rad)`;
  }

  public IsNorth() {
    return this.view ? this.view.getRotation() == 0 : true;
  }

  ngOnInit(): void {
    this.view = this.map.instance.getView();
    this.view.on('change:rotation', () => {
      this.changeDetectorRef$.detectChanges();
    });
  }

  constructor( private map: MapComponent, private changeDetectorRef$: ChangeDetectorRef ) {
  }

  handleClick(event:Event) {
    this.view.animate({ rotation: 0 });
    event.preventDefault();
  }
}