import {Component, Input,Output, ElementRef, EventEmitter, ViewChild} from '@angular/core';
import {Observable}       from 'rxjs/Observable';
import {SearchProjectsService} from '../../services/searchProjects.service';
import {ProjectService} from '../../landingPages/project/project.service';
// import {ModalLoading} from '../../utils/modal/loading.component';
import { Subject } from 'rxjs/Subject';
import {ClaimProject} from './claimEntities.class';
declare var UIkit:any;
import{EnvProperties} from '../../utils/properties/env-properties';

@Component({
    selector: 'claim-projects-search-form',

    template: `
    <div>
      <form class=" uk-animation uk-card uk-card-default uk-padding uk-padding-large uk-padding-remove-left uk-margin-left uk-grid" uk-grid="">

        <div class="uk-width-auto@m uk-first-column">
          <select   class=""  [(ngModel)]="selectedFunderId" name="select_funder"  >
                   <option  value="0" (click)="funderChanged('0','Select funder:')">Select funder:</option>
                   <option *ngFor="let  funder of funders"  [value]="funder.id" (click)="funderChanged(funder.id,funder.name)">{{(funder.name.split("||").length > 0)?(funder.name.split("||")[0]+" ("+funder.name.split("||")[1]+")"):(funder.name)}}</option>
          </select>
        </div>
        <div class="uk-width-expand@m">

              <entities-autocomplete [(properties)]=properties entityType="project" [funderId]="selectedFunderId"  [allowDuplicates]=true [showSelected]=false [placeHolderMessage] = "'Project name or ID'" title = "Projects"  [multipleSelections]=true  (addItem) = "select($event)" ></entities-autocomplete>
        </div>

        </form>

    </div>
        `

})
export class ClaimProjectsSearchFormComponent {
   ngOnInit() {
     this.getFunders();
   }
  //  @ViewChild (ModalLoading) loading : ModalLoading ;

  // @Input() public inline: boolean = false ; // for claimed started from landing pages
  public query = '';
  @Input() public selectedProjects=[] ;
  public elementRef;

  public funders:string[];
  public selectedFunderId:string ="0";
  selectedFunderName:string ="Select funder:";
  @Output() projectSelected = new EventEmitter();
  @Input() public properties:EnvProperties;

  public projects:string[];
  public warningMessage = "";
  public infoMessage = "";

  // public searchTermStream = new Subject<string>();
  // filtered: Observable<{}>   = this.searchTermStream
  // .debounceTime(300).distinctUntilChanged()
  // .switchMap((term: string) =>   this._projectService.searchForProjectsObs(term, this.selectedFunderId));
  public tries:number = 0 ;
  public keywordlimit = 3;

constructor(private _service: ProjectService, private _projectService: SearchProjectsService, myElement: ElementRef) {
    this.elementRef = myElement;
}


// search() {
//   console.info("heeere "+this.query );
//   this.infoMessage = "";
//   // this.filtered = [];
//   if(this.query == ""){
//     this.tries = 0;
//     this.warningMessage = "";
//   } else if(this.query && this.query.length < this.keywordlimit){
//     this.tries++;
//     if(this.tries == this.keywordlimit -1 ){
//       this.warningMessage = "Type at least " + this.keywordlimit + " characters";
//       this.tries = 0;
//     }
//   }else{
//     console.info("doo the search "+this.query );
//
//     this.tries = 0;
//     this.warningMessage = "";
//     this.searchTermStream.next(this.query);
//
//   }
//
// }
select(item){
    this.query = "";
    // this.searchTermStream.next(this.query); //clear
    item = item.value;
    var project: ClaimProject = new ClaimProject();
    project.funderId = (this.selectedFunderId=="0")?item.funderId:this.selectedFunderId;
    project.funderName = (this.selectedFunderId=="0")?item.funderName:this.selectedFunderName;
    project.projectId = item.id;
    project.projectName = item.projectName;
    project.projectAcronym = item.projectAcronym;
    project.startDate = item.startDate;
    project.endDate = item.endDate;
    project.code = item.code;
    project.jurisdiction = item.jurisdiction;
    project.fundingLevel0 = item.fundingLevel0;

    console.log(item);


    // this._service.getProjectDates(project.projectId).subscribe(
    //   data => {
    //       project.startDate = data.startDate;
    //       project.endDate = data.endDate;
    //   },
    //   err => console.log(err)
    // );
    var index:number =this.selectedProjects.indexOf(project);
    var found:boolean = false;
    this.warningMessage = "";

    for (var _i = 0; _i < this.selectedProjects.length; _i++) {
        let item = this.selectedProjects[_i];
        if(item.projectId == project.projectId){
              found=true;
              this.warningMessage = "Project already in selected list";
        }
     }

    if (!found) {
      this.selectedProjects.push(project);
      this.projectSelected.emit({
        value: true
      });
      UIkit.notification({
          message : 'A new project is selected.',
          status  : 'primary',
          timeout : 1000,
          pos     : 'top-center'
      });
    }else{
      UIkit.notification({
          message : 'The project is already on your list.',
          status  : 'warning',
          timeout : 1000,
          pos     : 'top-center'
      });
    }

}
showItem(item):string{
  return ((item.field[1]['@value'])?item.field[1]['@value']+" - ":"" ) + item.field[3]['@value'];
}
remove(item){
  var index:number =this.selectedProjects.indexOf(item);
   if (index > -1) {
      this.selectedProjects.splice(index, 1);
  }

}
handleClick(event){
 var clickedComponent = event.target;
 var inside = false;
 do {
     if (clickedComponent === this.elementRef.nativeElement) {
         inside = true;
     }
    clickedComponent = clickedComponent.parentNode;
 } while (clickedComponent);

}
getFunders ()  {
  console.info("Getting Funders....");
  this._projectService.getFunders(this.properties).subscribe(
    data => {
      this.funders = data[1];
      console.log("this.funders");
     },
    err => console.log(err)
  );
 }

  getProjects ()  {
    if(this.selectedFunderId != '0'){

    }
   }
funderChanged(funderId:string, funderName:string){
  this.selectedFunderId = funderId;
  this.selectedFunderName = funderName;
  console.info("Selected funder:"+this.selectedFunderId+ ' name:'+funderName );

}

}