import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { LocalStorageService } from 'angular-2-local-storage';
import { NavBarService } from './pgm.service';
import { SlideMenuModule } from 'cuppa-ng2-slidemenu/cuppa-ng2-slidemenu';
import { DomSanitizer } from '@angular/platform-browser';
import { environment } from '../../environments/environment.dev';

const pgmPages = [
  { title: '', back: 'menu' },
  { title: '', back: 'menu' },
  { title: 'CandidateDetails', back: 'menu' },
  { title: 'Course And Assessment', back: 'arrow_back' },
  { title: 'Learning Path', back: 'arrow_back' },
  { title: 'Employee Details', back: 'arrow_back' },
  { title: 'Reviewer Details', back: 'arrow_back'},
  { title: 'Learning Path Details', back: 'arrow_back'},
  { title: 'Candidates', back: 'arrow_back'},
];

@Component({
  selector: 'app-pgm',
  templateUrl: './pgm.component.html',
  styleUrls: ['./pgm.component.css'],
  providers: [NavBarService]
})
export class PgmComponent implements OnInit {
  onboardTab = false
  currentPageNumber: number;
  roleStatus: boolean;
  onlyOneRole: boolean;
  currentPageData: { title: string, back: string };
  backLink = '/pgm/landing';
  empData: {
    accessToken: any,
    loginType: any,
    fullName: any,
    firstName: any,
    userInfoMstrId: any,
    roleName: any,
    roles: any,
    skills: any,
    location: any
  };
  initials = '';
  showVideos: any;
  vidName: string;
  videoplayer: any;

  menuItemsArray: any[] = [
    // {'title':'Account','link':'#', 'id':'account'},
    // {'title':'Report','link':'#', 'id':'report'},
    {
      'title': 'Help', 'link': '#', 'id': 'help',
      'subItems': [
        { 'title': 'Candidate', 'link': '#', 'embed': 'Candidate.mov', 'id': 'candidateV', 'name': 'Candidate Help Video' },
        { 'title': 'Talent Acquisition', 'link': '#', 'embed': 'TA-Add+and+Edit+the+candidate.mov', 'id': 'talentV', 'name': 'Talent Acquisition Help Video' },
        { 'title': 'Employee', 'link': '#', 'embed': 'Employee+intro+and+capability+assessment.mov', 'id': 'employeeV', 'name': 'Employee Help Video' },
        { 'title': 'Digital Assets', 'link': '#', 'embed': 'Digital+Assets.mov', 'id': 'assetsV', 'name': 'Digital Assets' },
      ]
    },
    {
      title: 'Reports',
      'subItems': [
        { 'title': 'Reviewers Details', 'link': 'pgm/reviewerDetails', 'id': 'reviewerD', 'name': 'Reviewers Details' }
      ]
    }
  ];
  frmCandD:boolean = false;
  imageUrl: string = environment.imageUrl;
  constructor(protected localStorageService: LocalStorageService, private navBarService: NavBarService, private router: Router, private sanitizer: DomSanitizer) {

    if (window.location.origin !== 'http://localhost:8080') {
      var empData;
      empData = this.localStorageService.get('userInfo');
      this.empData = empData
      if (this.empData['roles'].length > 1) {
        this.onlyOneRole = false;
      } else {
        this.onlyOneRole = true;
      }
      console.log(this.empData, 'userInfo Detailssssss')
      if (this.empData['fullName']) {
        this.initials = this.empData['fullName'].replace(/\W*(\w)\w*/g, '$1').toUpperCase();
      }
    } else {
      this.initials = 'LS';
    }
    console.log('initials: ' + this.initials);
    navBarService.currentPage.subscribe((val: number) => {
      this.currentPageNumber = val;
      let currentRole = this.localStorageService.get('userSession')


      this.currentPageData = pgmPages[this.currentPageNumber];
      if (this.currentPageNumber === 0) {
        this.backLink = '/employee';

      }
      else if (this.currentPageNumber === 2) {
        this.backLink = '/talent-transformation/landing';
      } else if (this.currentPageNumber === 3) {
        this.backLink = '/talent-transformation/landing/employee';
      } else if (this.currentPageNumber === 4) {
        this.backLink = '/talent-transformation/landing/employee';
      } else if (this.currentPageNumber === 5 || this.currentPageNumber === 7) {
        this.backLink = '/talent-transformation/landing/employee';
      } else if (this.currentPageNumber === 8) {
        this.backLink = '/employee';
        if(currentRole !== 'COACH') {
          this.onboardTab = true
        } else {
          this.onboardTab = false

        }
      } else {
        this.backLink = '/talent-transformation/landing';
      }
      console.log('getting page in parent: ' + val);
    });

  }

  ngOnInit() {
  }
  navigateBack() {
    console.log('back btn clicked ... !!');
    this.router.navigate([this.backLink]);
  }
  openMenu() {
    console.log('menu btn clicked ... !!');
  }

  gotoLogout(evnt) {

    console.log('logout');
    localStorage.clear();
    this.router.navigate([''])
  }

  public onMenuClose() {
    console.log('menu closed');
  }
  public onMenuOpen() {
    console.log('menu Opened');
  }
  public onItemSelect(item: any) {
    if (item.name === 'Reviewers Details') {
      this.router.navigate(['pgm/reviewerDetails']);
    } else {
      //console.log(item);
      this.vidName = item.name;
      this.showVideos = item.embed;
      document.getElementById('openVideoModalButton').click();
    }
  }


  getEmbedURL(url) {
    // return this.sanitizer.bypassSecurityTrustResourceUrl('https://pgvideos.altimetrik.com/'+this.showVideos);
    if (this.showVideos === undefined) {
      this.showVideos = 'TA-Add+and+Edit+the+candidate.mov';
    }
    return ('https://pgvideos.altimetrik.com/' + this.showVideos);
  }

  vidStop(videoplayer) {
    videoplayer.pause();
  }
  changeRole(evnt) {
    this.roleStatus = !this.roleStatus;
  }
  closeNavDetails(event) {
    this.roleStatus = event;
  }

  openFeedModal(e){
    console.log(e);
    if(e == true){
      this.frmCandD = e
    }
  }

  closeFdModal(e){
    if(e == false){
      this.frmCandD = e;
    }
  }
}
