import { Component, Input, Output, EventEmitter } from "@angular/core";
import { BHPListConfig } from "./list.config";

@Component({
  selector: "BHPListGroup",
  template: `
    <ul class="list-group" >
      <li class="list-group-item"
        [ngClass]="{'active': selected === i}"
        *ngFor="let item of sources; let i=index"
        [attr.value]="item.value"
        [attr.index]="i"
        (click)=" onUserSelected(item.key,item.value,i)"
      >
        {{item.key}}
      </li>
    </ul>`
})
export class BHPListComponent {
  @Input() sources = [];
  @Input() selected = -1;

  @Output() userSelected = new EventEmitter();

  constructor(_config: BHPListConfig) {
    Object.assign(this, _config);
  }

  onUserSelected(key: any, value: any, index: number) {
    let item = { key: key, value: value, index: index };
    this.selected = index;
    this.userSelected.emit(item);
  }
}