/*--------------------------------------------------------------------------------------------------------------
 *  Copyright (c) insite-gmbh. All rights reserved.
 *  Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------------------------*/
import { Component, ViewChild, Inject, Input, OnInit, Pipe, PipeTransform, NgZone, Renderer, ElementRef } from '@angular/core';
import { ModalComponent } from '../../../commonUi/src/modal/modal.component';
import { IUserAuthStateService, IUSERAUTHSTATESERVICE_TOKEN } from '../interfaces/IUserAuthStateService.interface';
import { InaxTranslatePipe } from '../../../translate';
import { AuthAction } from '../interfaces/AuthAction';

@Component({
  selector: 'user-login',
  template: `
    <app-modal>
        <div class="app-modal-header">
          <h4 class="modal-title">{{ 'login.login' | translate }}</h4>
        </div>
        <div class="app-modal-body">
          <form>
            <div class="form-group">
              <label for="username">{{ 'login.username' | translate }}</label>
              <input #inputUsername class="form-control" id="username" [(ngModel)]="username" name="username" (keydown)="handleKeyDown($event)" (keyup)="handleKeyUp($event)">
            </div>
            <div class="form-group">
              <label for="pwd">{{ 'login.password' | translate }}</label>
              <input #inputPassword type="password" class="form-control" id="pwd" [(ngModel)]="password" name="password" (keyup)="handleKeyUp($event)">
            </div>
          </form>
        </div>
        <div class="app-modal-footer">
          <button type="button" class="btn btn-default" (click)="cancel()">{{ 'login.cancel' | translate}}</button>
          <button #buttonSubmit id="submit" type="button" class="btn btn-primary" (click)="submit()" (keydown)="handleKeyDown($event)">{{ 'login.submit' | translate}}</button>
        </div>
    </app-modal>
  `
})

export class UserLoginComponent implements OnInit {
  @ViewChild('inputUsername') inputUsernameElementRef: ElementRef;
  @ViewChild('inputPassword') inputPasswordElementRef: ElementRef;
  @ViewChild('buttonSubmit') buttonSubmitElementRef: ElementRef;
  @ViewChild(ModalComponent)
  public readonly modal: ModalComponent;
  @Input() username: string;
  @Input() password: string;

  private _actions: Array<AuthAction> = new Array<AuthAction>();

  constructor(@Inject(IUSERAUTHSTATESERVICE_TOKEN) private _userAuthStateService: IUserAuthStateService, 
    private _ngZone: NgZone, private _renderer: Renderer) {
  }

  ngOnInit() {
    this.username = this._userAuthStateService.username;
    this.password = "";
    this._userAuthStateService.actionRequest().subscribe((action: AuthAction) => {
      if (action.name === "login") {
        this._actions.push(action);
        if (!this.modal.visible) {
          this.show();        
        }
      }
    });
  }

  private show() {
    this.username = this._userAuthStateService.username;
    this.password = "";
    this.modal.show();
    this._ngZone.runOutsideAngular(() => {
      setTimeout(() => this.focusInputUsername(), 0)
    });
  }

  handleKeyUp(event: KeyboardEvent) {
    if (event.keyCode === 13) {
      if (event.srcElement.id === "username") {
        this.focusInputPassword();
        event.preventDefault();
      } else if (event.srcElement.id === "pwd") {
        this.submit();
      }
    } else if (event.keyCode === 27) {
      this.cancel();
    }
  }

  handleKeyDown(event: KeyboardEvent) {
    if (event.keyCode === 9) {
      if (event.shiftKey) {
        if (event.srcElement.id === "username") {
          this.focus(this.buttonSubmitElementRef);
          event.preventDefault();
        }
      }
      else {
        if (event.srcElement.id === "submit") {
          this.focusInputUsername();
          event.preventDefault();
        } 
      }
    }
  }

  submit() {
    this._actions.forEach(a => {
        let level = a.service.authenticate(this.username, this.password);
        if (level !== "") {
          a.authResult(this.username, level, true);
        } else {
          a.authResult("", "", false);
        }
    });
    this.modal.hide();
  }

  cancel() {
    this._actions.forEach(a => a.authResult("", "", false));
    this.modal.hide();
  }

  focusInputUsername() {
    this._renderer.invokeElementMethod(
      this.inputUsernameElementRef.nativeElement, 'focus', []);
  } 

  focusInputPassword() {
    this._renderer.invokeElementMethod(
      this.inputPasswordElementRef.nativeElement, 'focus', []);
  } 

  focusButtonSubmit() {
    this.focus(this.buttonSubmitElementRef);
  } 

  focus(el: ElementRef) {
    this._renderer.invokeElementMethod(
      el.nativeElement, 'focus', []);
  }
}