import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import _ from "lodash";

@Component({
  selector: 'app-lp-filter',
  templateUrl: './lp-filter.component.html',
  styleUrls: ['./lp-filter.component.scss']
})
export class LpFilterComponent implements OnInit {

  public levels;
  public skills = [];
  // filters
  levelFilters = [];
  skillFilters = [];

  @Input() tobeFilteredArray: any;
  @Input() fSkills: any;
  @Input() fLevels:any;
  @Output() filtercloseEvent = new EventEmitter<any>();
  @Output() checkedFilterArr = new EventEmitter<any>();
  @Output() resetFilter = new EventEmitter<any>();
  // @Output() skillFiltersArr = new EventEmitter();

  filteringArray = [];

  pageTitle: string;
  constructor() { }

  ngOnInit() {
    this.pageTitle = 'Filter';
    console.log('tobeFilteredArray -- ',this.tobeFilteredArray);
    console.log('fSkills -- ',this.fSkills);
    console.log('fLevels --',this.fLevels);
    // this.fLevels.forEach(element => {
    //   this.levelFilters.push(element);
    // });
    // console.log('levelFilters -- ',this.levelFilters);
    // this.fSkills.forEach(element => {
    //   this.skillFilters.push(element);
    // });
    // console.log("skillFilters -- ", this.skillFilters)
  }

  skillFilter(skill, i) {
    this.fSkills[i].checked = !this.fSkills[i].checked;
    this.toggleFilter(skill.name, this.skillFilters);
    this.applyFilters();
  }

  levelFilter(level,i) {

    this.fLevels[i].checked = !this.fLevels[i].checked;
    this.toggleFilter(level.name, this.levelFilters);
    this.applyFilters();
  }

  private toggleFilter(filter: string, filterArray: string[]) {
    if (filterArray.includes(filter)) {
      let index = filterArray.indexOf(filter);
      filterArray.splice(index, 1);
    } else {
      filterArray.push(filter);
    }
  }


  private applyFilters() {
    console.group('filters');
    console.log('level', this.levelFilters);
    console.log('skill', this.skillFilters);
    console.groupEnd();
    let that = this;

    this.tobeFilteredArray = this.filteringArray.filter(function (item, index, array) {
      // return all the candidates in one of the selected levels or all the candidates if there is no selection done
      return that.levelFilters.length > 0 ? that.levelFilters.includes(item.infoDetails.experienceLevel) : true;
    }).filter(function (item, index, array) {
      // return all the candidates in one of the selected skills or all the candidates if there is no selection done
      if (that.skillFilters.length > 0) {
        return _.intersection(that.skillFilters, item.infoDetails.pgUserSkillDtlsName).length > 0;
      } else {
        return true;
      }
    });
    this.checkedFilterArr.emit({levelFilter:this.levelFilters, skillFilter:this.skillFilters});
    // this.levelFiltersArr.emit(that.levelFilters);
    // this.skillFiltersArr.emit(that.skillFilters);
  }

  resetFilters() {
    this.levelFilters = [];
    this.skillFilters = [];
    this.fLevels.forEach(i => {
      i.checked = false
    })
    this.fSkills.forEach(i => {
      i.checked = false
    })

    this.resetFilter.emit({});
    // this.skillFiltersArr.emit(this.skillFilters);
    // this.filterCol =! this.filterCol;

    console.log(this.fLevels);
  }

  closeFilter(){
    this.filtercloseEvent.emit(true);
  }
}
