import { Component, Input, Injectable } from '@angular/core';
import { Location } from '@angular/common';
import { Feature } from 'ol';
import { Store } from '@ngrx/store';
import * as mapReducers from '../../reducers/map.reducer';
import { commonReducers,ItemTypeService, IItem, Item } from '@farmmaps/common';
import * as mapActions from '../../actions/map.actions';
import { Observable, from } from 'rxjs';
import { withLatestFrom } from 'rxjs/operators';
import { tassign } from 'tassign';
import { IQueryState } from '@farmmaps/common';


@Injectable()
export abstract class AbstractFeatureListComponent {
  @Input() features: Array<Feature>;
  @Input() queryState: IQueryState;
  constructor(public store: Store<mapReducers.State | commonReducers.State>, public itemTypeService: ItemTypeService, private location: Location) {
  }

  handleFeatureClick(feature:Feature) {
    var newQuery: any = tassign(mapReducers.initialState.query);
    newQuery.itemCode = feature.get('code');
    this.store.dispatch(new mapActions.DoQuery(newQuery));
  }

  handleFeatureMouseEnter(feature) {
    this.store.dispatch(new mapActions.SelectFeature(feature));
  }

  handleFeatureMouseLeave(feature) {
    this.store.dispatch(new mapActions.SelectFeature(null));
  }

  handleBackClick(event: MouseEvent) {
    event.preventDefault();
    this.location.back();
  }
}

@Injectable()
@Component({
  selector: 'fm-map-feature-list',
  templateUrl: './feature-list.component.html',
  styleUrls: ['./feature-list.component.scss']
})
export class FeatureListComponent extends AbstractFeatureListComponent {

  constructor(store: Store<mapReducers.State | commonReducers.State>, itemTypeService: ItemTypeService,location:Location) {
    super(store, itemTypeService,location);
  }
}