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

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() connectCommunityId:string
    public showAll:boolean = false;
    public _maxCharacters:number =28;

    @Output() toggleModal = new EventEmitter();

    @Output() modalChange = new EventEmitter();


    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)+")")
    }
    private _formatName(value){
      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();
        }
    }

    filterChange(selected:boolean){
      console.info("filter change: "+selected);
        if(selected){
            this.filter.countSelectedValues++;
            // this.reorderFilterValues();
        }else{
            this.filter.countSelectedValues--;
            // this.reorderFilterValues();
        }
    }
    getSelectedValues(filter):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]);
          }
        }
      }
      return selected;

    }
    getNotSelectedValues(filter):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;
      }
      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();
  }

}