import {Component, Input, Output, EventEmitter, ViewChild, ElementRef} from '@angular/core';
import { Filter, Value} from './searchHelperClasses.class';

@Component({
    selector: 'search-filter',
    templateUrl: 'searchFilter.component.html'
})

export class SearchFilterComponent {

  @Input() filter:Filter;
  @Input() showResultCount:boolean = true;
  @Input() isDisabled:boolean = false;
  @Input() addShowMore:boolean = true;
  @Input() showMoreInline: boolean = true;
  @Input() filterValuesNum: number = 4;
  public showAll:boolean = false;
  public _maxCharacters:number =28;

  @Output() toggleModal = new EventEmitter();

  @Output() modalChange = new EventEmitter();
  @Output() onFilterChange = new EventEmitter();
  keyword = "";
  sortBy = "num";

  public isOpen:boolean=false;

  constructor () {
    }

    ngOnInit() {}

    public _formatTitle(title,length){
      return (((title+" ("+length+")").length >this._maxCharacters)?(title.substring(0,(this._maxCharacters - (" ("+length+")").length - ('...').length))+"..."):title+" ("+((length >= 99)?length+"+":length)+")")
    }
    public _formatName(value){
      //let maxLineLength = 24;
      let maxLineLength = 35;

      //1 space after checkbox
      //3 space before number + parenthesis
      if(!this.showResultCount && value.name.length+1 > maxLineLength ){
        return value.name.substr(0, maxLineLength -3 -1)+'...';
      }
      if(value.name.length+value.number.toLocaleString().length +1 +3> maxLineLength){
        return value.name.substr(0, (maxLineLength- 3 -4 - value.number.toLocaleString().length))+'...';
      }

      return value.name;
    }

    filterKeywords(value){
      if(this.keyword.length > 0){
        if(value.toLowerCase().indexOf(this.keyword.toLowerCase()) ==-1){
          return false;
        }
      }
      return true;
    }
    filterChange(selected:boolean){
        if(selected){
            this.filter.countSelectedValues++;
        }else{
            this.filter.countSelectedValues--;
        }
        this.onFilterChange.emit({
            value: this.filter
          });
    }
    uniqueFilterChange(value: Value) {
      let tmp = value.selected;
      value.selected = !tmp;

      if(value.selected){
        this.filter.countSelectedValues++;
      }else{
        this.filter.countSelectedValues--;
      }

      this.onFilterChange.emit({
        value: this.filter
      });
    }
    clearFilter() {
      for (var i=0; i < this.filter.values.length; i++){
        this.filter.values[i].selected = false;
      }
      this.filter.countSelectedValues = 0;
      this.onFilterChange.emit({
        value: this.filter
      });
    }
    getSelectedValues(filter, sortBy:string = "num"):any{
      var selected = [];
      if(filter.countSelectedValues >0){
        for (var i=0; i < filter.values.length; i++){
          if(filter.values[i].selected){
            selected.push(filter.values[i]);
          }
        }
      }
      if(sortBy == "name"){

        selected.sort((n1,n2)=> {
          if (n1.name > n2.name) {
              return 1;
          }

          if (n1.name < n2.name) {
              return -1;
          }

          return 0;
        });
      }
      return selected;

    }
    getNotSelectedValues(filter, sortBy:string = "num"):any{
      var notSselected = [];
      for (var i=0; i < filter.values.length; i++){
        if(!filter.values[i].selected){
          notSselected.push(filter.values[i]);
        }
      }

      if(sortBy == "name"){

        notSselected.sort((n1,n2)=> {
          if (n1.name > n2.name) {
              return 1;
          }
          if (n1.name < n2.name) {
              return -1;
          }

          return 0;
        });
      }
      return notSselected;
    }

  toggle() {
    this.isOpen = !this.isOpen;
  }

  getFilterName(value){
    let name = value.name +" ("+ value.number.format()+")";
    console.log(name);
    return name;
  }
}