import { UserInfo } from '../../models/userInfo.model';
import { Component, OnInit, OnDestroy, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { Router } from '@angular/router';
import { LocalStorageService } from 'angular-2-local-storage';
import { EmployeeNavBarService } from './employee-nav-bar.service';
import { Subject } from 'rxjs/Rx';
import { ProgressStateSetupWorkspaceService } from 'app/employee/employee-dashboard/employee-sandbox/progress-state-setup-workspace.service';
import { EmployeeSandboxProgressIconComponent } from 'app/employee/employee-sandbox-progress-icon/employee-sandbox-progress-icon.component';
import { SandboxSetupProcessWorkSpace, state, ResponseSetupWorkSpace } from 'app/models/sandbox-progress.model';
import { AuthService } from 'app/services/auth.service';
import { Observable } from 'rxjs/Observable';
import { resetFakeAsyncZone } from '@angular/core/testing';
import { SlideMenuModule } from 'cuppa-ng2-slidemenu/cuppa-ng2-slidemenu';
import { DomSanitizer } from '@angular/platform-browser';
import { environment } from '../../../environments/environment.dev';

const dashboardPages = [
  { title: '' },
  { title: 'My Courses' },
  { title: 'Platform' },
  { title: 'My Innovation' },
  { title: 'Sandbox Setup' },
  { title: 'Assessment' },
  { title: 'My Profile' },
  { title: 'Primary Assessment' },
  { title: 'Technical Usecase Assessment' },
  { title: 'Business Usecase Assessment' },
  { title: 'Learning Path' },
  { title: 'Review Details' }
];

const currentPageNotShowButtonPlus = [4, 6];
@Component({
  selector: 'app-employee-dashboard',
  templateUrl: './employee-dashboard.component.html',
  styleUrls: ['./employee-dashboard.component.css'],
  providers: [EmployeeNavBarService]
})

export class EmployeeDashboardComponent implements OnInit, OnDestroy {
  showButtonPlus: boolean;
  roleStatus: boolean = false;
  private $destroyed = new Subject();

  img_path_prefix = environment.imageUrl+'/assets/img/employee/dashboard/home/';
  img_path_suffix = '.png';
  currentPageNumber: number;
  currentPageData: { title: string };
  backLink = '/employee/dashboard';
  empData: UserInfo;
  onlyOneRole: boolean;
  initials = '';
  showVideos: any;
  vidName: string;
  navItems = [
    { title: 'Self Learning', link: '/employee/first-time' },
    { title: 'Idea', link: '/employee/first-time-wizard/innovation/idea' },
    { title: 'POC', link: '/employee/first-time-wizard/innovation/poc' },
  ];
  frmCandD:boolean = false;
  imageUrl: string = environment.imageUrl;
  /*OLD NAV ITEMS*/
  /* navItems = [
     { title: 'Sandbox', link: ['../../employee/sandbox'] },
     { title: 'Course', link: '/employee/first-time-wizard' },
     { title: 'Idea', link: '/employee/first-time-wizard/innovation/idea' },
     { title: 'POC', link: '/employee/first-time-wizard/innovation/poc' },
     { title: 'Component', link: '/employee/first-time-wizard/platform' }
   ];*/

  public menuItemsArray: any[] = [
    {
      'title': 'Help', 'link': '#', 'id': 'help',
      'subItems': [
        { 'title': 'Employee', 'link': '#', 'embed': 'Employee+intro+and+capability+assessment.mov', 'id': 'employeeV', 'name': 'Employee Help Video' },
      ]
    },
    {'title': 'Capability Transformation', 'link': '#', 'id': 'helps'},
    {'title': 'Innovation', 'link': '#', 'id': 'helps'}
  ];
  public dataState: SandboxSetupProcessWorkSpace = { show: false, state: state.NONE };

  constructor(
    protected localStorageService: LocalStorageService,
    private employeeNavBarService: EmployeeNavBarService,
    private router: Router,
    private stateService: ProgressStateSetupWorkspaceService,
    private authService: AuthService,
    private sanitizer: DomSanitizer,
  ) {
    this.empData = this.localStorageService.get('userInfo') as UserInfo;
    if (this.empData['fullName']) {
      this.initials = this.empData['fullName'].replace(/\W*(\w)\w*/g, '$1').toUpperCase();
    }
    if (this.empData['roles'].length > 1) {
      this.onlyOneRole = false;
    } else {
      this.onlyOneRole = true;
    }
    this.router.events.pairwise().subscribe((e) => {
      console.log(e);
    });
    employeeNavBarService.currentPage$.takeUntil(this.$destroyed).subscribe((val: number) => {
        this.currentPageNumber = val;
        if (val === 5 ) {
          this.backLink = 'employee/dashboard/old';
        }
        if (val === 7 ||val === 8 || val === 9 || val === 10 || val === 11 ) {
          this.backLink = 'employee/dashboard';
        }
        if(val === 0){
          this.backLink = 'employee';

        }
        this.currentPageData = dashboardPages[this.currentPageNumber];
        this.showButtonPlus = !currentPageNotShowButtonPlus.some(c => c === this.currentPageNumber);
      });
  }

  ngOnInit() {
    this.stateService.setupProcessWorked.subscribe(data => {
      this.dataState = data;
    });
  }

  ngOnDestroy() {
    this.$destroyed.next();
    this.$destroyed.complete();
  }

  navigateBack() {
    this.router.navigate([this.backLink]);
  }

  public onMenuClose() {
    console.log('menu closed');
  }

  public onMenuOpen() {
    console.log('menu Opened');
  }

  public onItemSelect(item: any) {
    console.log(item);
    if (item.title === 'Innovation') {

      this.router.navigate(['employee/dashboard/old']);
    } else  if (item.title === 'New Dashboard') {

      this.router.navigate(['employee/dashboard']);
    }  else {
      this.vidName = item.name;
      this.showVideos = item.embed;
      document.getElementById('openVideoModalButton').click();
    }
  }

  
  changeRole(evnt) {
    this.roleStatus = !this.roleStatus;
  }
  closeNavDetails(event) {
    this.roleStatus = event;
  }
  getEmbedURL(url) {
    return ('https://pgvideos.altimetrik.com/' + this.showVideos);
  }

  vidStop(videoplayer) {
    videoplayer.pause();
  }

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

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