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

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

export class SearchFilterComponent implements OnInit, OnChanges{

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

  @Output() toggleModal = new EventEmitter();

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

  public isOpen:boolean=false;

    constructor () {
    }

    ngOnInit() {
      this.filter.values = this.filter.values.filter(value => !value.name.toLowerCase().includes('unknown') && !value.name.toLowerCase().includes('not available'));
      if(this.filter.filterType == "radio"){
        this.filter.radioValue = "";
        this.filter.values.forEach(value => {
          if(value.selected){
            this.filter.radioValue = value.id
          }
        });
      }
    }
    
    ngOnChanges(changes: SimpleChanges) {
      if(changes.filter) {
        this.filter.values = this.filter.values.filter(value => !value.name.toLowerCase().includes('unknown') && !value.name.toLowerCase().includes('not available'));
        if(this.filter.filterType == "radio"){
          this.filter.radioValue = "";
          this.filter.values.forEach(value => {
            if(value.selected){
              this.filter.radioValue = value.id
            }
          });
        }
      }
    }
  
  public _formatTitle(title,length){
      return (((title+" ("+length+")").length >this._maxCharacters)?(title.substring(0,(this._maxCharacters - (" ("+length+")").length - ('...').length))+"..."):title+" ("+(length>95?"100":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.filter.values.forEach(value => {
          value.selected = (value.id == this.filter.radioValue);
      });
      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
      });
      this.filter.radioValue = "";
    }

  getSelectedAndTopValues(filter, topNum: number = 6):any{
    var values = [];

    for (let i=0; i < topNum; i++){
      if(filter.values.length <= i) {
        break;
      }
      values.push(filter.values[i]);
    }

    if(filter.countSelectedValues >0){
      for (let i=topNum; i < filter.values.length; i++){
        if(filter.values[i].selected){
          values.push(filter.values[i]);
        }
      }
    }

    return values;
  }

    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;
    }

    sort(values: Value[]) {
      let sorted: Value[] = values.slice();
      if(this.sortBy == "name"){

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

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

          return 0;
        });
      }
      return sorted;
    }

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

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