import { identifierModuleUrl } from '@angular/compiler';
import { EmployeeFirstTimeComponent } from './../../employee-first-time/employee-first-time.component';
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { EmployeeWizardService } from '../employee-wizard.service';
import { EmployeeSearchBarComponent } from '../../shared/employee-search-bar/employee-search-bar.component';
import { EmployeeHttpService } from 'app/services/employee/employee-http.service';
import { AuthService } from 'app/services/auth.service';
import { Observable } from 'rxjs/Rx';
import { Subject } from 'rxjs/Rx';
import { environment } from '../../../../environments/environment.dev';

const img_path_prefix = environment.imageUrl+'/assets/img/employee/wizard/';
const img_path_suffix = '.png';

@Component({
  selector: 'app-employee-wizard-ct1',
  templateUrl: './employee-wizard-ct1.component.html',
  styleUrls: ['./employee-wizard-ct1.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class EmployeeWizardCT1Component implements OnInit {

  private $destroyed = new Subject();
  checkImg = img_path_prefix + 'check' + img_path_suffix;

  masterSkills: any = {};

  categories = [
    'All Development',
    'Web Development',
    'Mobile Apps'
  ];

  tiles = [];

  selectedCategories = [];

  constructor(
    private employeeWizardService: EmployeeWizardService,
    private employeeHttpService: EmployeeHttpService,
    private authService: AuthService
  ) {
    employeeWizardService.courseCategories.takeUntil(this.$destroyed).subscribe((tiles: any) => {
        this.tiles = tiles;
    });
    employeeWizardService.categories.takeUntil(this.$destroyed).subscribe((categories: any) => {
      this.selectedCategories = categories;
    });
  }

  ngOnInit() {
    this.employeeWizardService.setCurrentPage(0);
    if (this.tiles.length === 0) {
      Observable.zip(
        this.getSkills(),
        this.employeeHttpService.getActiveCoursesCategoriesBySkills()
      ).subscribe(arrayOfResults => {
        const masterSkills = arrayOfResults[0];
        const masterCategories = arrayOfResults[1];
        Object.keys(masterCategories).map(skillId => {
          const categoriesArray = masterCategories[skillId];
          let categories = [];
           for (let j = 0; j < categoriesArray.length; j++) {
            categories.push({
              id: categoriesArray[j].courseCategoryId,
              title: categoriesArray[j].courseCategoryName,
              parentSkill: { id: skillId, name: masterSkills[skillId].skillTrackName },
              selected: false
            });
          }
          this.tiles.push({
            title: masterSkills[skillId].skillTrackName,
            class: 'col-md-6',
            categories: categories
          });
        });
      });
    }
  }

  getSkills() {
    return Observable.fromPromise(this.authService.getAllSkillTrackMstr())
    .map((skills) => {
      const _localSkills = {};
      skills.pgSkillTrackMstr.forEach(skill => {
        _localSkills[skill.skillTrackMstrId] = skill;
      });
      return _localSkills;
    });
  }

  selectCategory(tileIndex: number, catIndex: number) {
    const category = this.tiles[tileIndex].categories[catIndex];
    if (category.selected) {
      category.selected = false;
      this.selectedCategories = this.selectedCategories.filter(item => item.id !== category.id);
    } else {
      category.selected = true;
      this.selectedCategories.push(category);
    }
    this.employeeWizardService.setCourseCategories(this.tiles);
    this.employeeWizardService.setSelectedCategories(this.selectedCategories);
  }
}
