import { Component, OnInit, Input, ContentChild, TemplateRef, ViewChild, Output, EventEmitter } from "@angular/core";
import { FormGroup, FormControl, FormArray, AbstractControl } from "@angular/forms";
import { ExternalSourcesUrlModel } from "../../../../models/external-sources/ExternalSourcesUrlModel";
import { AutoCompleteConfiguration } from "../../auto-complete/AutoCompleteConfiguration";

@Component({
  selector: 'app-external-item-listing',
  templateUrl: './external-item-listing.component.html',
  styleUrls: ['./external-item-listing.component.scss']
})
export class ExternalItemListingComponent implements OnInit {
  @Input()
  public placeholder: string;

  @Input()
  public formGroup: AbstractControl;

  @Input()
  public autoCompleteConfiguration: AutoCompleteConfiguration;

  @Input()
  public displayFunction: Function;

  @Input()
  public subtitleFunction: Function;

  @Input()
  public disabled = true;

  @Input()
  public titleKey: string;

  @Input()
  parentTemplate;

  @Input()
  public options: Array<ExternalSourcesUrlModel>

  @Output()
  public onItemChange = new EventEmitter<any>();

  public choice: string;
  public formControl = new FormControl();


  ngOnInit() {
    if (this.disabled) this.formControl.disable();
  }

  onItemChangeFunc(event) {
    if (event) this.onItemChange.emit(event);
  }

  selectionChange(event) {
    if (this.formControl.disabled) this.formControl.enable();
    this.autoCompleteConfiguration.requestItem.criteria["type"] = event.value;
  }

  deleteItem(name: number) {
    (<FormArray>this.formGroup).removeAt(name)
  }
}