import {Component, Input, Output, EventEmitter} from '@angular/core';
import {Observable}       from 'rxjs';

import { Filter, Value} from './searchHelperClasses.class';
import {Open} from '../../utils/modal/open.component';

@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 = false;
    @Input() filterValuesNum: number = 5;
    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;

    // filterModalChange() {
    //   console.info("Modal Changed");
    //   this.modalChange.emit({
    //     value: true
    //   });
    //   //this.close();
    // }

    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;
      //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;
      //(((value.name+" ("+value.number+")").length >this._maxCharacters)?(value.name.substring(0,(this._maxCharacters - (" ("+value.number+")").length - ('...').length))+"..."):value.name)
    }
    // toggleShowAll(){
    //     this.showAll = !this.showAll;
    //     if(this.showAll == false) {
    //         this.reorderFilterValues();
    //     }
    // }


    filterKeywords(value){
      if(this.keyword.length > 0){
        if(value.toLowerCase().indexOf(this.keyword.toLowerCase()) ==-1){
          return false;
        }
      }
      return true;
    }
    filterChange(selected:boolean){
      //console.info("filter change: "+selected);
        if(selected){
            this.filter.countSelectedValues++;
            // this.reorderFilterValues();
        }else{
            this.filter.countSelectedValues--;
            // this.reorderFilterValues();
        }
        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
      });
    }
    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 = [];
      //if(filter.countSelectedValues >0){
        for (var i=0; i < filter.values.length; i++){
          if(!filter.values[i].selected){
            notSselected.push(filter.values[i]);
          }
        }
      //}else {
      //  notSselected = filter.values;
      //}

      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;
    }
    // reorderFilterValues() {
    //     for(let value of this.filter.values) {
    //         if(value.selected) {
    //             let index: number = this.filter.values.indexOf(value);
    //             let selectedValue:Value = this.filter.values[index];
    //
    //             this.filter.values.splice(index, 1);
    //             this.filter.values.splice(0, 0, selectedValue);
    //         }
    //     }
    // }
//     sliceSelected() {
//         let values: Value[] = [];
//
//         for(let value of this.filter.values) {
//             if(value.selected) {
//                 let index: number = this.filter.values.indexOf(value);
//                 let selectedValue:Value = this.filter.values[index];
//
//                 this.filter.values.splice(index, 1);
//                 this.filter.values.splice(0, 0, selectedValue);
//             }
//         }


  // toggle() {
  //   this.toggleModal.emit({
  //     value: this.filter
  //   });
  // }


  open() {
    this.isOpen = true;
  }

  close() {
    this.isOpen = false;
  }

  // filterChange2(selected:boolean){
  //
  //   console.info("filter change2");
  //     if(selected){
  //         this.filter.countSelectedValues++;
  //         // this.reorderFilterValues();
  //     }else{
  //         this.filter.countSelectedValues--;
  //         // this.reorderFilterValues();
  //     }
  //     this.close();
  // }
  getFilterName(value){
    let name = value.name +" ("+ value.number.format()+")";
    console.log(name)


    //   <span class="filterName"><div title = "{{value.name}}">
    // <input [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterModalChange(value.selected)">
    //   {{value.name}} </div></span>
    // <span class="filterNumber" *ngIf = "showResultCount === true" >  ({{value.number | number}})</span>
    return name;
  }
}