import {
  Component,
  OnInit,
  OnDestroy
} from '@angular/core';

import { OidcSecurityService } from '../auth/services/oidc.security.service';
import { Subscription } from 'rxjs/Subscription';

@Component({
  /**
   * The selector is what angular internally uses
   * for `document.querySelectorAll(selector)` in our index.html
   * where, in this case, selector is the string 'home'.
   */
  selector: 'home',  // <home></home>
  /**
   * We need to tell Angular's Dependency Injection which providers are in our app.
   */
  providers: [
    Title
  ],
  /**
   * Our list of styles in our component. We may add more to compose many styles together.
   */
  styleUrls: ['./home.component.css'],
  /**
   * Every Angular template is first compiled by the browser before Angular runs it's compiler.
   */
  templateUrl: './home.component.html'
})
export class HomeComponent implements OnInit, OnDestroy {
 
  message: string;
  name = 'none';
  email = 'none';
  userDataSubscription: Subscription;
  userData: boolean;
  isAuthorizedSubscription: Subscription;
  isAuthorized: boolean; 
  /**
   * Set our default values
   */
  public localState = { value: '' };
  /**
   * TypeScript public modifiers
   */
  constructor(
    public oidcSecurityService: OidcSecurityService,
    public appState: AppState,
    public title: Title
  ) { 
    this.message = 'HomeComponent constructor';
  }

  public ngOnInit() {
    console.log('hello `Home` component');
    /**
     * this.title.getData().subscribe(data => this.data = data);
     */
    this.isAuthorizedSubscription = this.oidcSecurityService.getIsAuthorized().subscribe(
      (isAuthorized: boolean) => {
          this.isAuthorized = isAuthorized;
      });

    this.userDataSubscription = this.oidcSecurityService
        .getUserData().subscribe((userData: any) => {

        if (userData !== '') {
            this.name = userData.name;
            this.email = userData.email;
        }
            console.log('userData getting data');
        });
  }

  ngOnDestroy(): void {
    this.userDataSubscription.unsubscribe();
    this.isAuthorizedSubscription.unsubscribe();
  }

  public submitState(value: string) {
    console.log('submitState', value);
    this.appState.set('value', value);
    this.localState.value = '';
  }
}
import { AppState } from '../app.service';
import { Title } from './title';
import { XLargeDirective } from './x-large';
