import {Component, Injectable, Input, Directive} from '@angular/core';
import {Location} from '@angular/common';
import {Store} from '@ngrx/store';
import * as mapReducers from '../../reducers/map.reducer';
import {AppConfig, commonReducers, IItem, ItemTypeService} from '@farmmaps/common';
import * as mapActions from '../../actions/map.actions';
import {Router} from '@angular/router';
import { IItemLayer } from '../../models/item.layer';


@Injectable()
@Directive()
export abstract class AbstractSelectedItemComponent {
  @Input() item: IItem;
  @Input() parentItem: IItem;
  @Input() itemLayer: IItemLayer;
  @Input() overlayLayers: Array<IItemLayer>;
  constructor(public store: Store<mapReducers.State | commonReducers.State>, public itemTypeService: ItemTypeService, private location: Location, public router: Router) {
  }

  handleOnView(item: IItem) {
    if (this.itemTypeService.hasViewer(item)) {
      const viewer = this.itemTypeService.itemTypes[item.itemType].viewer;
      const url = `/viewer/${viewer}/item/${item.code}`;
      this.router.navigate([url]);
    }
    return false;
  }

  handleOnEdit(item: IItem) {
    let editor = "property";
    if(this.itemTypeService.hasEditor(item)) {
      editor = this.itemTypeService.itemTypes[item.itemType].editor;
    }
    const url = `/editor/${editor}/item/${item.code}`
    this.router.navigate([url]);
    return false;
  }

  handleAddAsLayer(item: IItem,layerIndex = -1) {
    this.store.dispatch(new mapActions.AddLayer(item,layerIndex));
    return false;
  }

  handleRemoveLayer(item: IItem,layerIndex = -1) {
    const itemLayer = this.getItemLayer(item,layerIndex);
    if(itemLayer) {
      this.store.dispatch(new mapActions.RemoveLayer(itemLayer));
    }
    return false;
  }

  getItemLayer(item:IItem,layerIndex = -1):IItemLayer {
    const li = layerIndex==-1?0:layerIndex;
    const selected = this.overlayLayers.filter(ol => ol.item.code == item.code && ol.layerIndex == li);
    if(selected.length==0) return null;
    return selected[0];
  }

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

  parentOfItemType(itemType:string):boolean {
    if(this.parentItem && this.parentItem.itemType == itemType) return true;
    return false;
  }
}

@Injectable()
@Component({
  selector: 'fm-map-selected-item',
  templateUrl: './selected-item.component.html',
  styleUrls: ['./selected-item.component.scss']
})
export class SelectedItemComponent extends AbstractSelectedItemComponent {

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

  getThumbnailUrl(item:IItem):string {
    return this.config.getConfig('apiEndPoint') +'/api/v1/items/'+item.code+'/thumbnail?v=' + Date.parse(item.updated);
  }
}