import { Component, Input, Injectable } from '@angular/core';
import { Store } from '@ngrx/store';
import * as mapReducers from '../../reducers/map.reducer';
import { Observable } from 'rxjs';
import { mergeMap } from 'rxjs/operators';
import { commonReducers, ItemTypeService, ItemService } from '@farmmaps/common';
import { AbstractItemWidgetComponent} from '../item-list-item/item-list-item.component';
import { ForItemType } from '../for-item/for-itemtype.decorator';
import { HttpClient } from '@angular/common/http';
import { GeoJSON } from 'ol/format';
import { getCenter, Extent, createEmpty, extend } from 'ol/extent';

@Injectable()
@Component({
  selector: 'fm-map-item-widget-weather',
  templateUrl: './item-widget-weather.component.html',
  styleUrls: ['./item-widget-weather.component.scss']
})
export class ItemWidgetWeatherComponent extends AbstractItemWidgetComponent {

  private _format: GeoJSON;

  constructor(store: Store<mapReducers.State | commonReducers.State>, itemTypeService: ItemTypeService, public http: HttpClient, private itemService$: ItemService) {
    super(store, itemTypeService);
    this._format = new GeoJSON();
  }

  public weather: Observable<any>;

  ngOnInit() {
    this.weather = this.itemService$.getItem(this.item.code).pipe(mergeMap(i => {
      console.debug(i.geometry);
      var geometry = this._format.readGeometry(i.geometry);
      var centroid = getCenter(geometry.getExtent());
      var url = 'https://weather.akkerweb.nl/v2/data/currentobservation/?c=' + centroid[0] + ',' + centroid[1] + '&key=5f17ef36283b49e9b099a1f4064fbf3d';
      var cw = this.http.get(url);
      return cw;
    }));
  }
}