import {Component, Input,Output, ElementRef, EventEmitter} from '@angular/core';
import {JSONP_PROVIDERS}  from '@angular/http';
import {Observable}       from 'rxjs/Observable';
import { RouteParams, ROUTER_DIRECTIVES} from '@angular/router-deprecated';
import {ContextsService} from '../../services/contexts.service';


@Component({
    selector: 'claim-contexts',
    template: `
        <div class="panel" >
          <div class="input-group">
          <div class=" input-group-btn">
              <button class="btn btn-success dropdown-toggle" type="button" id="communityDropDown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                {{selectedCommunityLabel}}

              </button>
              <ul class="dropdown-menu" aria-labelledby="communityDropDown">
                <li  (click)="communityChanged('0','Community:')"><a  >Community:</a></li>
                <li *ngIf="communities"  (click)="communityChanged(communities.id, communities.label)"  ><a  >{{communities.label}}</a></li>

              </ul>
            </div>
            <div class="input-group-btn ">
              <button class="btn btn-success dropdown-toggle" type="button" id="categoryDropDown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                {{selectedCategoryLabel}}

              </button>
              <ul class="dropdown-menu" aria-labelledby="categoryDropDown">
                <li  (click)="categoryChanged('0','Category:')"><a  >Category:</a></li>
                <li *ngFor="let category of categories"  (click)="categoryChanged(category.id, category.label)"  ><a  >{{category.label}}</a></li>

              </ul>
            </div>

          <input id="community" type="text" class="validate filter-input form-control" placeholder="Search for contexts" [(ngModel)]=query (keyup)=filter()   >
        </div>
            <div class="suggestions" *ngIf="filteredList.length > 0">
                <ul class="list-group" >
                    <li  class="list-group-item"   *ngFor=" let item of filteredList">
                        <a (click)="select(item)">{{item.label}}</a>
                    </li>
                </ul>
            </div>
     </div>
     <div *ngIf="warningMessage.length > 0" class="alert alert-warning" role="alert">{{warningMessage}}</div>
     <div *ngIf="infoMessage.length > 0" class="alert alert-info" role="alert">{{infoMessage}}</div>
        `,
    providers:[ ContextsService ]

})
export class ClaimContextComponent {
   ngOnInit() {
this.getCommunities();

}
public query = '';
public filteredList = [];
@Input() public selectedList ;
public elementRef;
@Output() contextsChange = new EventEmitter();

public communities:string[];
@Input() public selectedCommunityId:string = "0";
 selectedCommunityLabel:string = "Community:";
@Output() cselectedCommunityChange = new EventEmitter();

public categories:string[];
@Input() public selectedCategoryId:string ="0";
selectedCategoryLabel:string ="Category:";
@Output() selectedCategoryChange = new EventEmitter();
public concepts:string[];
public warningMessage = "";
public infoMessage = "";

constructor(private _contextService: ContextsService,myElement: ElementRef) {
    this.elementRef = myElement;
}

filter() {
  this.warningMessage = "";
  this.infoMessage = "";
  if(this.selectedCommunityId == "0"){
    this.warningMessage = "Please select Community";
  }else if (this.query !== ""){
    this.warningMessage = "";
    this.infoMessage = "";
    if(this.selectedCategoryId == "0"){
      this.warningMessage = "Specify category for more concepts";
    }
    this.filteredList = this.concepts.filter(function(el){
          return el.label.toLowerCase().indexOf(this.query.toLowerCase()) > -1;
      }.bind(this));
      if(this.filteredList.length == 0 ){
        this.infoMessage = "No results found";
      }
  }else{
      this.filteredList = [];
  }
}

select(item){
    this.query = "";
    this.filteredList = [];
    var context= { community: this.selectedCommunityLabel, category: this.selectedCategoryLabel, concept: item };
    var found:boolean = false;
    this.warningMessage = "";
    for (var _i = 0; _i < this.selectedList.length; _i++) {
        let item = this.selectedList[_i];
        if(item.concept.id == context.concept.id){
              found=true;
              this.warningMessage = "Concept already in selected list";
        }
     }
    if (!found) {
      this.selectedList.push(context);
      this.contextsChange.emit({
         value: this.selectedList
       });
    }
    // var index:number =this.selectedList.indexOf(context);
    // if (index == -1) {
    //   this.selectedList.push(context);
    //   this.contextsChange.emit({
    //      value: this.selectedList
    //    });
    // }

}
// remove(item){
//   var index:number =this.selectedList.indexOf(item);
//    if (index > -1) {
//       this.selectedList.splice(index, 1);
//   }
//   this.contextsChange.emit({
//     value: this.selectedList
//   });
// }
handleClick(event){
 var clickedComponent = event.target;
 var inside = false;
 do {
     if (clickedComponent === this.elementRef.nativeElement) {
         inside = true;
     }
    clickedComponent = clickedComponent.parentNode;
 } while (clickedComponent);
  if(!inside){
      this.filteredList = [];
  }
}
getCommunities ()  {
  this._contextService.getCommunities().subscribe(
    data => {
      this.communities = data.communities;
      // var concept= ["{id: this.communities['id'], label: this.communities['label']  }"];
      //  this.filteredList.push(concept);
      //  this.concepts.push(concept);
     },
    err => console.error(err)
  );
 }
 getCategories ()  {
   this.categories=[];
   if(this.selectedCommunityId != '0'){
     this._contextService.getCategories(this.selectedCommunityId).subscribe(
       data => {
         this.categories = data.category;
         this.concepts = [];
         this.filteredList = [];
         if (this.query !== ""){
           this.filter();
         }

        },
       err => console.error(err)
     );
   }
  }
  getConcepts ()  {
    if(this.selectedCategoryId != '0'){
      this._contextService.getConcepts(this.selectedCategoryId, "").subscribe(
        data => {
          this.concepts = data.concept;
          if (this.query !== ""){
            this.filter();
          }
         },
        err => console.error(err)
      );
    }else{
      this.concepts=[];
    }
   }
communityChanged(communityId:string, communityLabel:string){
  this.warningMessage = "";
  this.infoMessage = "";
  this.selectedCommunityId= communityId;
  this.selectedCommunityLabel= communityLabel;
  this.getCategories();

}
categoryChanged(categoryId:string, categoryLabel:string){
  this.warningMessage = "";
  this.infoMessage = "";
  this.selectedCategoryId = categoryId;
  this.selectedCategoryLabel = categoryLabel;
  this.getConcepts();

}

}