import { UserInfo } from '../../models/userInfo.model';
import { Component, OnInit, OnDestroy, ViewContainerRef, ComponentFactoryResolver, ViewEncapsulation } from '@angular/core';
import { Router } from '@angular/router';
import { LocalStorageService } from 'angular-2-local-storage';
import { EmployeeNavBarService } from '../employee-dashboard/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: '', back: 'menu' },
  { title: 'My Courses', back: 'back' },
  { title: 'Platform', back: 'back' },
  { title: 'My Innovation', back: 'back' },
  { title: 'Sandbox Setup', back: 'back' },
  { title: 'Assessment', back: 'back' },
  { title: 'My Profile', back: 'back' }
];
const currentPageNotShowButtonPlus = [4, 6];

@Component({
  selector: 'app-employee-newdashboard',
  templateUrl: './employee-newdashboard.component.html',
  styleUrls: ['./employee-newdashboard.component.scss'],
  providers: [EmployeeNavBarService]
})
export class EmployeeNewdashboardComponent implements OnInit, OnDestroy {
  imagelink: string;
  mytaskview: Boolean;
  myfeedbackview: boolean;
  initials = '';
  empData: UserInfo;
  showVideos: any;
  vidName: string;
  roleStatus: boolean = false;
  backToPrevPage: boolean;
  showArow: boolean;
  onlyOneRole: boolean;
  currentPageNumber: number;
  showButtonPlus: boolean;
  currentPageData: { title: string, back: string };
  backLink = '/employee/dashboard';
  private $destroyed = new Subject();
  frmCandD:boolean = false;

  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' },
      ]
    },
  ];

  constructor(protected localStorageService: LocalStorageService, private router: Router, private employeeNavBarService: EmployeeNavBarService) {
    this.empData = this.localStorageService.get('userInfo') as UserInfo;
    if (this.empData['roles'].length > 1) {
      this.onlyOneRole = false;
    } else {
      this.onlyOneRole = true;
    }
    if (this.empData['fullName']) {
      this.initials = this.empData['fullName'].replace(/\W*(\w)\w*/g, '$1').toUpperCase();
    }

    employeeNavBarService.currentPage$.takeUntil(this.$destroyed).subscribe((val: number) => {
      this.currentPageNumber = val;
      this.currentPageData = dashboardPages[this.currentPageNumber];
      this.showButtonPlus = !currentPageNotShowButtonPlus.some(c => c === this.currentPageNumber);
    });
  }
  ngOnInit() {
    this.mytaskview = true;
    this.myfeedbackview = false;
    // this.showArow = this.backToPrevPage;
    this.imagelink = environment.imageUrl+'/assets/img/employee/newdashboard/';
  }

  public onItemSelect(item: any) {
    // console.log(item);
    this.vidName = item.name;
    this.showVideos = item.embed;
    document.getElementById('openVideoModalButton').click();
  }

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

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

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

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

  viewchange(view) {
    
    if (view === 'myfeedbackview') {
      this.mytaskview = false;
      this.myfeedbackview = true;
    } else {
      this.mytaskview = true;
      this.myfeedbackview = false;
    }
  }
  goPrevPage(event) {
    alert('here');
    this.showArow = event;
  }
  nevBackWithoutRouting() {
    this.backToPrevPage = true;
  }
  ngOnDestroy() {
    // this.$destroyed.next();
    // this.$destroyed.complete();
  }

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

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