import {Component, Input} from '@angular/core';
import {ActivatedRoute} from '@angular/router';

import { FetchProjects } from '../../utils/fetchEntitiesClasses/fetchProjects.class';
import { SearchProjectsService } from '../../services/searchProjects.service';

import {ErrorCodes} from '../../utils/properties/errorCodes';
import {StringUtils} from '../../utils/string-utils.class';
import {RouterHelper} from '../../utils/routerHelper.class';
import{EnvProperties} from '../../utils/properties/env-properties';

@Component({
    selector: 'searchingProjectsTab',
    template: `
        <errorMessages [status]="[fetchProjects.searchUtils.status]" [type]="'projects'" tab_error_class=true></errorMessages>

        <div *ngIf="fetchProjects.searchUtils.status == errorCodes.DONE">
            <div class = "uk-text-right" *ngIf = "fetchProjects.searchUtils.totalResultsNoFilters > 10">
                <a  [queryParams]="routerHelper.createQueryParams(['organization', 'og'], [organizationId, 'and'])"
                    routerLinkActive="router-link-active" [routerLink]="linkToSearchProjects" class="uk-button uk-button-text">
                    View all {{fetchProjects.searchUtils.totalResultsNoFilters | number}} results
                </a>
			      </div>
            <div class= "searchPaging uk-panel uk-margin-top">
              <div class="uk-clearfix">
                <div class="uk-float-right" *ngIf="fetchProjects.results  && fetchProjects.searchUtils.totalResults > fetchProjects.searchUtils.size">
                  <paging-no-load [currentPage]="page" [totalResults]="fetchProjects.searchUtils.totalResults" [term]="keyword" [size]="size"  (pageChange)="pageChange($event)"> </paging-no-load>
                </div>
              </div>
              <ul  *ngIf = "fetchProjects.funders.length > 1" class="uk-list uk-list-divider uk-margin-remove">
                <li  *ngFor="let filter of fetchProjects.filters "  >
                    <!--div class="text-bold">Filter by {{filter.title}}:</div-->
                    <span *ngFor = "let value of filter.values"  class = "uk-animation-fade">
                       <input [(ngModel)]="value.selected" type="checkbox"  (ngModelChange)="filterChange(value.selected)" />
                       <span title = "{{value.name}}"> {{value.name}}</span><span *ngIf = "showResultCount === true" > ({{value.number | number}})</span>
                    </span>
                </li>

                <li *ngIf = "fetchProjects.searchUtils.totalResults !=fetchProjects.searchUtils.totalResultsNoFilters "> Filtered {{fetchProjects.searchUtils.totalResults | number}} results of {{fetchProjects.searchUtils.totalResultsNoFilters | number}} total results</li>
                <li></li>
              </ul>

              <tab-result  [(results)]="fetchProjects.results" [(status)]= "fetchProjects.searchUtils.status"
                            type="project" urlParam="projectId" [showLoading] = true [showOrganizations] = false>
              </tab-result>
            </div>
        </div>
    `
})

export class SearchingProjectsTabComponent {
    @Input() fetchProjects : FetchProjects;
    @Input()  organizationId:string = "";
    @Input() properties:EnvProperties;
    public page :number = 1;
    public size :number = 10;
    public linkToSearchProjects: string;

    public routerHelper:RouterHelper = new RouterHelper();
    public errorCodes:ErrorCodes = new ErrorCodes();

    private filterQuery:string = "";

    constructor (private  route: ActivatedRoute,
                 private _searchProjectsService: SearchProjectsService) {
    }


    ngOnInit() {

            if(this.organizationId) {
                this.linkToSearchProjects = this.properties.searchLinkToAdvancedPublications;//+"?organization="+this.organizationId+"or=and";;
                if(this.fetchProjects.searchUtils.totalResults > 0) {
                  this.search(false,"");
                }
            }
    }


    private search(refine:boolean, filterQuery:string){
      var refineFields:string [] = ["funder"];
      this.fetchProjects.getResultsForOrganizations(this.organizationId, filterQuery, this.page, this.size,(refine)?refineFields:[], this.properties);
    }

    public pageChange($event) {
      this.page=$event.value;
      this.search(false, this.filterQuery);
    }

    public filterChange($event) {
      console.log("Filter Changed");
      this.updateFilters();
      //this.search(true, this.filterQuery);
      this.search(false, this.filterQuery);
    }

    private updateFilters (){
      this.filterQuery = "";
      for (let filter of this.fetchProjects.filters){
        var filterLimits="";
        for (let value of filter.values){
            if(value.selected == true){
              //filterLimits+=((filterLimits.length == 0)?'':',') +'"'+ StringUtils.URIEncode(value.id)+'"';
              filterLimits+=((filterLimits.length == 0)?'':' or ')+filter.filterId+' exact ';
              filterLimits+='"'+ StringUtils.URIEncode(value.id)+'"';
             }
        }
        if(filterLimits.length > 0){
          //this.filterQuery+=' and '+filter.filterId + ' exact '+ filterLimits + ' ';
          this.filterQuery+=' and ( ' + filterLimits + ' ) ';
        }

      }
      console.log("Filter Changed"+this.filterQuery);

    }
}