import { Component, OnInit, Output,EventEmitter } from '@angular/core';
import { AuthService } from '../../../../../services/auth.service';
import _ from "lodash";
import {MatAutocompleteModule} from '@angular/material/autocomplete';
import {FormControl} from '@angular/forms';
import {Observable} from 'rxjs/Observable';
import {startWith} from 'rxjs/operators/startWith';
import {map} from 'rxjs/operators/map';
import { TutorialService } from '../../../../../services/tutorial.service';

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

  skills: any;
  skilltrackResponse: any;
  masterSkills: any= [];
  roleSkills: any;
  myControl: FormControl = new FormControl();
  filteredOptions: Observable<string[]>;
  theData: any;
  newskFormdet:any;
  skillCategory: any;
  @Output() cancelSkilEvent = new EventEmitter();

  constructor(private AuthService: AuthService) { 
    this.getAllSkills();
    this.getAllRole();
    this.getAllCategory();
  }

  ngOnInit() {
    // console.log(JSON.stringify(this.skilltrackResponse));

    // this.filteredOptions = this.myControl.valueChanges.pipe(
    //   startWith(''),
    //   map(val => this.filter(val))
    // );
  }

  // filter(val: string): string[] {
  //   return this.skilltrackResponse.filter(option => option.toLowerCase().indexOf(val.toLowerCase()) === 0);
  // }
  

  getAllSkills(){

    this.AuthService.getAllSkill().then(resp =>{
      console.log(resp,'getAllSkill')
      this.skills = resp.pgSkillTrackDtlsList
      var customSkill = []
      var skills = _.uniqBy(resp.pgSkillTrackDtlsList,'pgSkillTrackMstr.skillTrackName')
      var masterSkills = _.uniqBy(_.flattenDeep(skills.map(i => i.pgSkillTrackMstr)))
      masterSkills.forEach(usrSkills => {
        var dtlsSkill = resp.pgSkillTrackDtlsList.filter(item => item.pgSkillTrackMstr.skillTrackName == usrSkills.skillTrackName)
        var skillTrackDtlsName = _.uniqBy(_.flattenDeep(dtlsSkill.filter(i => {return {id : i.skillTrackDtlsId, name : i.skillTrackDtlsName}})))
        customSkill.push({skillMaster:usrSkills,skillTrackDtls :dtlsSkill,skillTrackDtlsName:skillTrackDtlsName});
      });
      console.log(customSkill);
      this.skilltrackResponse = customSkill;
    }).catch(err =>{

      console.log(err)
    })
  }

  getAllRole() {
    this.AuthService.getAllSkill().then(resp =>{
    console.log(resp,'getAllSkill')
    this.roleSkills = resp;
    console.log(this.roleSkills.pgSkillTrackDtlsList.length)
    console.log(this.roleSkills)
    this.masterSkills = _.uniqBy(this.roleSkills.pgSkillTrackDtlsList,'pgSkillTrackMstr.skillTrackMstrId');
    console.log('table, ', this.masterSkills);
    const skillsDtlsList = this.roleSkills.pgSkillTrackDtlsList;
    this.theData = this.masterSkills.map(function (item, index, array) {
      console.log('iteration ', item.pgSkillTrackMstr.skillTrackMstrId);
      const skillsList = [];
      skillsDtlsList.forEach(usrSkills => {
        if (item.pgSkillTrackMstr.skillTrackMstrId == usrSkills.pgSkillTrackMstr.skillTrackMstrId) {
          skillsList.push(usrSkills);
        }
      });
      console.log('skillslist ', skillsList)
      const joinedSkills = skillsList.reduce( function(prevElem, elem) {
        console.log('joined ', elem);
        return prevElem + '\t' + elem.description;
      }, '');

        console.log(joinedSkills)
        return [item.pgSkillTrackMstr.description,item.pgSkillCategory.description, joinedSkills];
      });
      console.log(this.masterSkills.length)
    }).catch(err =>{

      console.log(err)
    })
  }

  getAllCategory(){
  this.AuthService.getAllSkillCategory().then(resp =>{
    // console.log(resp,'getAllSkillCategory')
    this.skillCategory = resp.pgSkillCategoryList;
    console.log(this.skillCategory);
    });
  }

  cancelSkillSetForm(){
    this.cancelSkilEvent.emit('true');
    }

    submitTheForm(){}
    updateUsecase(){}
}
