import { Component, Input, OnInit, ComponentFactoryResolver, ViewChild, SimpleChanges, ComponentFactory, Inject, Type} from '@angular/core';
import { IItem } from '@farmmaps/common';
import { AbstractSelectedItemComponent, SelectedItemComponent  } from '../selected-item/selected-item.component';
import { WidgetHostDirective } from '../widget-host/widget-host.directive';
import { IItemLayer } from '../../models/item.layer';


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

  constructor(private componentFactoryResolver: ComponentFactoryResolver, @Inject(AbstractSelectedItemComponent) public selectedItemComponents: AbstractSelectedItemComponent[] ) {
  }

  @Input() item: IItem;
  @Input() itemLayer:IItemLayer;
  @Input() overlayLayers:Array<IItemLayer>;

  @ViewChild(WidgetHostDirective, { static: true }) widgetHost: WidgetHostDirective; 

  loadComponent() {
    let componentFactory: ComponentFactory<AbstractSelectedItemComponent> = this.componentFactoryResolver.resolveComponentFactory(SelectedItemComponent); // default
    let firstComponentWithTypeAndTask = this.selectedItemComponents
      .find(value => value['forSourceTask'] == this.item.sourceTask &&
        value['forItemType'] == this.item.itemType
      );

    if (firstComponentWithTypeAndTask) {
      componentFactory = this.componentFactoryResolver.resolveComponentFactory(firstComponentWithTypeAndTask['constructor'] as any);
    } else {
      let firstComponentWithType = this.selectedItemComponents
        .find(value => value['forSourceTask'] == null &&
          value['forItemType'] == this.item.itemType);

      if (firstComponentWithType) {
        componentFactory = this.componentFactoryResolver.resolveComponentFactory(firstComponentWithType['constructor'] as any);
      }
    }
    const viewContainerRef = this.widgetHost.viewContainerRef;
    viewContainerRef.clear();

    const componentRef = viewContainerRef.createComponent(componentFactory);
    (<AbstractSelectedItemComponent>componentRef.instance).item = this.item;
    (<AbstractSelectedItemComponent>componentRef.instance).itemLayer = this.itemLayer;
    (<AbstractSelectedItemComponent>componentRef.instance).overlayLayers = this.overlayLayers;
  }

  ngOnChanges(changes: SimpleChanges) {
    if (changes["item"] && changes["item"].currentValue) {
        this.loadComponent();
    }
    if (changes["itemLayer"] && changes["itemLayer"].currentValue) {
      this.loadComponent();
    }
    if (changes["overlayLayers"] && changes["overlayLayers"].currentValue) {
      this.loadComponent();
    }
  }
}