import { Component, OnInit,Input,ViewChild,ElementRef,AfterViewInit } from '@angular/core';
import {IItemLayer} from '../../../models/item.layer';
import { Store } from '@ngrx/store';
import * as mapReducers from '../../../reducers/map.reducer';
import * as mapActions from '../../../actions/map.actions';
import { MapComponent } from 'ngx-openlayers';
import { ILayervalue } from '../../../models/layer.value';
import { Observable,interval,Subject } from 'rxjs';
import { debounce, throttle } from 'rxjs/operators';
import { toLonLat } from 'ol/proj';
import { toStringHDMS } from 'ol/coordinate';
import { ClipboardService } from 'ngx-clipboard'
import {GeoJSON,WKT} from 'ol/format';
import { Point } from 'ol/geom';

@Component({
  selector: 'fm-map-layer-values',
  templateUrl: './layer-values.component.html',
  styleUrls: ['./layer-values.component.scss']
})
export class LayerValuesComponent implements OnInit,AfterViewInit {

  @ViewChild('layerValues') containerRef:ElementRef;
  offsetX$ =0;
  offsetY$ =0;
  lonlat$="";
  wkt$= "";
  layerValues$:Observable<Array<ILayervalue>> = this.store.select(mapReducers.selectGetLayerValues);
  enabled$:Observable<boolean> = this.store.select(mapReducers.selectGetLayerValuesEnabled);
  wktFormat$:WKT;

  constructor( private store: Store<mapReducers.State>,private map: MapComponent,private clipboardService$:ClipboardService) {   
    this.wktFormat$=new WKT();
  }

  ngOnInit(): void {
   
  }

  moveEndSubject = new Subject<any>();

  ngAfterViewInit():void {
    this.offsetY$ = this.containerRef.nativeElement.offsetTop;
    this.offsetX$ = this.containerRef.nativeElement.offsetLeft;
    this.map.instance.on('moveend', () => {
      this.moveEndSubject.next({});     
    });
    this.moveEndSubject.pipe(throttle(ev => interval(100))).subscribe(() =>  this.updateValuesLocation());
  }

  updateValuesLocation() {
    const xy = this.map.instance.getCoordinateFromPixel([this.offsetX$,this.offsetY$])
    const lonlat = toLonLat(xy);
    this.wkt$ = this.wktFormat$.writeGeometry(new Point(lonlat))
    this.lonlat$ = toStringHDMS(lonlat);
    this.store.dispatch(new mapActions.SetLayerValuesLocation(xy[0],xy[1]));
  }  

  copyToClipboard() {
    this.clipboardService$.copy(this.wkt$);
  }
}