import { File } from 'app/models/InnovationIdea.model';
import { LogoutDataService } from './logout-data.service';
import { RoleNames } from 'app/models/auth/auth.model';
import { UserInfo } from 'app/models/userInfo.model';
import {Component, OnInit, Output, ElementRef, HostListener, EventEmitter, Input, OnDestroy} from '@angular/core';
import { LocalStorageService } from 'angular-2-local-storage';
import { Router } from '@angular/router';
import { Utils } from 'app/utils';
import { EmployeeHttpService } from 'app/services/employee/employee-http.service';
import { SafeUrl, DomSanitizer } from '@angular/platform-browser';
import { Subject } from 'rxjs/Rx';

@Component({
  selector: 'app-employee-logout',
  templateUrl: './employee-logout.component.html',
  styleUrls: ['./employee-logout.component.scss']
})
export class EmployeeLogoutComponent implements OnInit, OnDestroy {
  private _open = false;
  private $destroyed = new Subject();

  @Output() goToLogout = new EventEmitter<string>();
  @Output() feedbackInit = new EventEmitter();

  public userInfo: UserInfo;
  @Input() role: any;
  @Input() forCandidateOnly: boolean;
  public userInformation: UserInfo;
  public userInitials: String;
  profileImgUrl: SafeUrl;

  /* Enum variable to use in html template */
  userRoles = RoleNames;

  @HostListener('mouseover') onMouseOver() {
    this.open();
  }

  @HostListener('mouseout') onMouseOut() {
    this.close();
  }

  constructor(
    protected localStorageService: LocalStorageService,
    private employeeHttpService: EmployeeHttpService,
    private sanitizer: DomSanitizer,
    private el: ElementRef,
    private router: Router,
    private logoutDataService: LogoutDataService
  ) {
    this.el.nativeElement.style.display = 'none';
  }

  ngOnInit() {

    this.userInfo = this.localStorageService.get('userInfo') || this.localStorageService.get('authToken');
    this.userInitials = Utils.Initials(this.userInfo['fullName']);
    this.logoutDataService.profileImgUrl$.takeUntil(this.$destroyed).subscribe((imgUrl: SafeUrl) => {
      if (imgUrl) {
        this.profileImgUrl = imgUrl;
      }
    });
    if (!this.profileImgUrl && this.userInfo.profileImgId) {
      this.employeeHttpService
      .getEmployeeRelatedFile(this.userInfo.profileImgId)
      .subscribe((s: File[]) => {
        if (s && s.length > 0) {
          this.profileImgUrl = this.sanitizer.bypassSecurityTrustUrl(`data:${s[0].contentType};base64, ${s[0].fileContent}`);
        }
      });
    }
  }

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

  close() {
    this._open = false;
    setTimeout(() => {
      if (!this._open) {
        this.el.nativeElement.style.display = 'none';
      }
    }, 100);
  }

  open() {
    this._open = true;
    this.el.nativeElement.style.display = '';
  }

  logout() {
    this.goToLogout.emit('');
    delete this.localStorageService;
    localStorage.clear();
    sessionStorage.clear();
    this.router.navigate(['']);
  }

  gotoEmployeeProfile() {
    this.router.navigate(['employee/dashboard/profile']);
  }

}
