import { Component, OnInit, Output, EventEmitter, ViewChild, Input, SimpleChanges } from '@angular/core';
import { EmployeeHttpService } from 'app/services/employee/employee-http.service';
import { LocalStorageService } from 'angular-2-local-storage';
import { PgEmployeeProjectDtlsEntity, PgUserInfoDtlsList } from 'app/models/employee.model';
import { AuthService } from 'app/services/auth.service';
import { OnChanges } from '@angular/core/src/metadata/lifecycle_hooks';
import { ToastsManager } from 'ng2-toastr';

interface Skill {
  text: string;
  selected: boolean;
  id: number;
}
@Component({
  selector: 'app-card-project-details',
  templateUrl: './card-project-details.component.html',
  styleUrls: ['./card-project-details.component.scss']
})
export class CardProjectDetailsComponent implements OnInit, OnChanges {

  listSkills: Skill[];
  userInfo: any;
  @Output() navigation = new EventEmitter<{ page: string, data?: PgEmployeeProjectDtlsEntity[] }>();
  @Input() actionNavigation: any;
  @Input() data: { pictureImage: string, UserInfoDtls: PgUserInfoDtlsList, listSkills: Skill[], showApplyForCoach: boolean };
  constructor(private employeeService: EmployeeHttpService,
    protected localStorageService: LocalStorageService, protected authService: AuthService, private toastr: ToastsManager) { }

  ngOnChanges(changes: SimpleChanges): void {

    const actionNavigation = changes['actionNavigation'].currentValue;
    if (actionNavigation && actionNavigation.skills && this.listSkills) {

      const sk = actionNavigation.currentValue.skills as Array<{ id: number, name: string }>;
      sk.forEach(skill => {
        this.listSkills.find(f => f.id === skill.id).selected = true;
      });
    }
  }
  ngOnInit() {
    this.userInfo = this.localStorageService.get<any>('userInfo');

    this.authService.getAllSkill()
      .then(ss => {
        this.listSkills = (ss.pgSkillTrackDtlsList as Array<any>)
          .map(skill => {
            return {
              text: skill.skillTrackDtlsName,
              selected: false,
              id: skill.skillTrackDtlsId
            };
          });
        if (this.actionNavigation && this.actionNavigation.skills) {
          const sk = this.actionNavigation.skills as Array<{ id: number, name: string }>;
          sk.forEach(skill => {
            this.listSkills.find(f => f.id === skill.id).selected = true;
          });
        }
      });
  }
  onSubmit(e) {
    const data = new FormData(e.currentTarget);
    this.employeeService.addProjectDtlsForEmployee({
      projectDtlsId: this.actionNavigation && this.actionNavigation.id || null,
      title: data.get('title').toString(),
      description: data.get('description').toString(),
      skills: this.listSkills.filter(s => s.selected).map(s => s.id),
      userInfoMstrId: this.userInfo.userInfoMstrId
    }).subscribe(r => {
      this.data.UserInfoDtls.pgUserInfoMstr = r.pgUserInfoDtls.pgUserInfoMstr;
      this.toastr.success('Project Saved Successfully');
      if (this.actionNavigation && this.actionNavigation.navigation) {
        this.navigation.emit({ page: this.actionNavigation.navigation, data: r.pgUserInfoDtls.pgUserInfoMstr.pgEmployeeProjectDtls });
      } else {
        this.navigation.emit({ page: 'project-added', data: r.pgUserInfoDtls.pgUserInfoMstr.pgEmployeeProjectDtls });
      }
    }, err => this.toastr.error('Was wrong', 'Project Saved'));
  }
  gotoBack() {
    if (this.actionNavigation && this.actionNavigation.navigation) {
      this.navigation.emit({ page: this.actionNavigation.navigation });
    } else {
      this.navigation.emit({ page: 'project-added' });
    }
  }
}
