import { File } from 'app/models/InnovationIdea.model';
import { UserInfo } from 'app/models/userInfo.model';
import { Component, OnInit, ViewChild, ElementRef, HostListener } from '@angular/core';
import { EmployeeHttpService } from 'app/services/employee/employee-http.service';
import { LocalStorageService } from 'angular-2-local-storage';
import { Observable } from 'rxjs/Observable';
import { AuthService } from 'app/services/auth.service';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Router, ActivatedRoute } from '@angular/router';
import { ToastsManager } from 'ng2-toastr';
import { EmployeeDetailsResponse, PgUserInfoDtlsList } from 'app/models/employee.model';
import { SafeUrl, DomSanitizer } from '@angular/platform-browser';
import { EmployeeProfileDescriptionComponent } from 'app/employee/employee-profile/employee-profile-description/employee-profile-description.component';
import { EmployeeProfileInformationComponent } from 'app/employee/employee-profile/employee-profile-information/employee-profile-information.component';
import { EmployeeNavBarService } from 'app/employee/employee-dashboard/employee-nav-bar.service';

interface Skill {
  text: string;
  selected: boolean;
  id: number;
}
@Component({
  selector: 'app-employee-profile',
  templateUrl: './employee-profile.component.html',
  styleUrls: ['./employee-profile.component.scss'],
})
export class EmployeeProfileComponent implements OnInit {
  displaySubmitButton: boolean;
  showApplyForCoach: boolean;
  fullProfile: boolean;
  showButtonDONE = false;

  pictureImage: SafeUrl;
  // backupSkillsSelected: number[];
  userInfo: UserInfo;
  skillsOnwerEmployee: Array<number>;

  public UserInfoDtls: PgUserInfoDtlsList;

  public hovered: boolean;
  public toggleSkillsList = false;
  public listSkills: Skill[];

  @ViewChild(EmployeeProfileInformationComponent) profInfo: EmployeeProfileInformationComponent;

  constructor(private employeeService: EmployeeHttpService,
    protected localStorageService: LocalStorageService,
    protected authService: AuthService,
    private router: Router,
    private toastr: ToastsManager,
    private sanitizer: DomSanitizer,
    private activateRouter: ActivatedRoute,
    private employeeNavBarService: EmployeeNavBarService ) {
      employeeNavBarService.setCurrentPage(6);
    }

  ngOnInit() {
    this.activateRouter.data
      .subscribe((dat: { fullProfile: boolean }) => {
        this.fullProfile = dat.fullProfile;
      });
    this.userInfo = this.localStorageService.get<UserInfo>('userInfo');
    Promise.all([
      (this.userInfo == null || !this.userInfo.userInfoMstrId) ? Promise.resolve() :
        this.employeeService.getEmployeeDetails(this.userInfo.userInfoMstrId).toPromise<EmployeeDetailsResponse>(),
      this.authService.getAllSkill()]
    )
      .then(arr => {
        const data = arr[0] as EmployeeDetailsResponse, ss = arr[1];
        this.UserInfoDtls = data.pgUserInfoDtlsList[0];

        this.showApplyForCoach =
          !data.pgUserInfoDtlsList[0].pgUserInfoMstr.pgRoleUser.
            find(r => r.pgRolePrivilege.pgRoleMstr.roleName.toUpperCase() === 'COACH');

        this.listSkills = (ss.pgSkillTrackDtlsList as Array<any>)
          .map(skill => {
            return {
              text: skill.skillTrackDtlsName,
              selected: false,
              id: skill.skillTrackDtlsId
            };
          });


        const fileMap = this.UserInfoDtls.pgUserInfoMstr.pgUserFileMapping.find(f => f.fileType === 'PROFILEIMAGE');
        if (fileMap) {

          this.employeeService
            .getEmployeeRelatedFile(fileMap.fileId)
            .subscribe((s: File[]) => {

              this.pictureImage = this.sanitizer
                .bypassSecurityTrustUrl(`data:${s[0].contentType};base64, ${s[0].fileContent}`);

            });
        }
      });

  }

  gotoPage(): void {
    this.router.navigate(['/employee/first-time-wizard']);
  }

  submitProfile() {
    this.employeeService.applyForCoach(this.userInfo.userInfoMstrId.toString())
      .subscribe(r => {
        this.profInfo.gotoNavigation({ page: 'project-successful-submit' });
        this.showButtonDONE = true;
      }, er => {
        this.toastr.error('was wrong');
        console.log(er);
      });
  }

  showButtonSubmit(e) {
    if (e.showApplyForCoach) {
      this.displaySubmitButton = true;
    }
  }
}
