import { LayoutService } from './../layout.service';
import { SignOffAction } from './../../auth/store/auth.actions';
import { AppState } from './../../store/app.reducers';
import { Component, OnInit, OnDestroy, Output, EventEmitter, Input } from '@angular/core';
import { LoadingService } from '../loading.service';
import { Subscription } from 'rxjs';
import { Store } from '@ngrx/store';
import { Router } from '@angular/router';
import { User } from '../model/user.model';
import { RoleUtil } from '../role.util';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit, OnDestroy {

  @Input() navigationOpened: boolean;
  @Output() navigationOpenedChange = new EventEmitter();
  
  @Input() userToken: String;
  @Input() user: User;

  loadingSubscription: Subscription;
  loading: boolean = false;

  isWebView = this.layoutService.isWebView;

  ngOnInit(){
    this.loadingSubscription = this.loadingService.loadingVisibility.subscribe(
      (loadingVisible: boolean) => {
        this.loading = loadingVisible;
      }
    );
  }

  onToggleNavigation(){
    this.navigationOpened = !this.navigationOpened;
    this.navigationOpenedChange.emit(this.navigationOpened);
  }

  onLogout(){
    this.router.navigate(['/']);
    setTimeout(
      () => { this.appStore.dispatch(new SignOffAction()); }, 200
    );
  }

  ngOnDestroy(){
    this.loadingSubscription.unsubscribe();
  }
  
  constructor(
    private loadingService: LoadingService, 
    private appStore: Store<AppState>,
    private router: Router,
    private roleUtil: RoleUtil,
    private layoutService: LayoutService
  ){}
}
