import { Component, Host, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges, forwardRef, Inject, InjectionToken } from '@angular/core';
import { HttpClient } from "@angular/common/http";
import { LayerVectorComponent, SourceVectorComponent, MapComponent, LayerImageComponent } from 'ngx-openlayers';
import { LayerVectorImageComponent } from '../layer-vector-image/layer-vector-image.component';
import { ItemService } from '@farmmaps/common';
import { IItem } from '@farmmaps/common';
import { ISelectedFeatures } from '../../../models';

import {Vector} from 'ol/source';
import {Feature,Collection} from 'ol';
import {Extent} from 'ol/extent';
import * as style from 'ol/style';
import * as proj from 'ol/proj';
import Projection from 'ol/proj/Projection';
import * as loadingstrategy from 'ol/loadingstrategy';
import {GeoJSON} from 'ol/format';

@Component({
  selector: 'item-features-source',
  template: `<ng-content></ng-content>`,
  providers: [
    { provide: SourceVectorComponent, useExisting: forwardRef(() => ItemFeaturesSourceComponent) }
  ]
})

export class ItemFeaturesSourceComponent extends SourceVectorComponent implements OnInit, OnChanges {
  instance:Vector;
  features: Collection<Feature>;
  @Input() item: IItem;
  @Input() layerIndex: number = 0;
  constructor(@Host() private layer: LayerVectorImageComponent, private itemService: ItemService, @Host() private map: MapComponent) {
    super(layer);
  }

  private colorIndex = 0;
  private styleCache = {};

  ngOnInit() {
    this.instance = new Vector({
      loader: (extent: Extent, resolution: number, projection: Projection) => {
        let format = new GeoJSON();
        this.itemService.getItemFeatures(this.item.code, extent, projection.getCode(), this.layerIndex).subscribe((data) => {
          var features = format.readFeatures(data);        
          // TODO 13/6/2019 The line below causes an endless loop. Action required?
          this.instance.addFeatures(features);
          // TODO 13/6/2019 Action required: check if feature collection hasn't been changed (Willem)
          // var t = this.vectorSource.getFeatures();
        });
      },
      format: new GeoJSON(),
      strategy: loadingstrategy.bbox
    });
    this.features = new Collection<Feature>();
    this.layer.instance
    this.layer.instance.setStyle((feature) => {
      var resolution = this.map.instance.getView().getResolution();
      var r = (2 / resolution) / 2;
      var color = feature.get("color");
      return new style.Style(
        {
          fill: new style.Fill({
            color: color
          }),
          image: new style.Circle({
            fill: new style.Fill({
              color: color
            }),
            stroke: new style.Stroke({
              color: color,
              width: 1.25
            }),
            radius: r
          }),
          stroke: new style.Stroke({
            color: color,
            width: 1.25
          })
        });           
    });
    this.host.instance.setSource(this.instance);
  }

  ngOnChanges(changes: SimpleChanges) {
    if (this.instance) {
      if (changes['layerIndex']) {
        this.instance.clear();
      }      
    }
  }
}