import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { CustomErrorStateMatcher } from '@app/_helpers';
import { AuthService } from '@app/_services';
import { Router } from '@angular/router';

@Component({
  selector: 'app-auth',
  templateUrl: './auth.component.html',
  styleUrls: ['./auth.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AuthComponent implements OnInit {
  keyForm: FormGroup;
  matcher: CustomErrorStateMatcher = new CustomErrorStateMatcher();
  keyFormSubmitted: boolean = false;
  keyFormLoading: boolean = false;
  passwordForm: FormGroup;
  passwordFormSubmitted: boolean = false;
  passwordFormLoading: boolean = false;

  constructor(
    private authService: AuthService,
    private formBuilder: FormBuilder,
    private router: Router,
    private cdr: ChangeDetectorRef
  ) {}

  async ngOnInit(): Promise<void> {
    this.keyForm = this.formBuilder.group({
      key: ['', Validators.required],
    });
    this.passwordForm = this.formBuilder.group({
      password: ['', Validators.required],
    });
    if (this.authService.privateKey !== undefined) {
      const setKey = await this.authService.setKey(this.authService.privateKey);
      if (setKey) {
        this.passwordInput();
      }
      if (setKey && this.authService.sessionToken !== undefined) {
        this.loginView();
      }
    }
  }

  get keyFormStub(): any {
    return this.keyForm.controls;
  }
  get passwordFormStub(): any {
    return this.passwordForm.controls;
  }

  async onSubmit(): Promise<void> {
    this.keyFormSubmitted = true;

    if (this.keyForm.invalid) {
      return;
    }

    this.keyFormLoading = true;
    const keySetup = await this.authService.setKey(this.keyFormStub.key.value);
    if (keySetup) {
      this.passwordInput();
    }
    this.keyFormLoading = false;
    this.cdr.detectChanges();
  }

  async onPasswordInput(): Promise<void> {
    this.passwordFormSubmitted = true;

    if (this.passwordForm.invalid) {
      return;
    }

    this.passwordFormLoading = true;
    const passwordLogin = await this.authService.passwordLogin(
      this.passwordFormStub.password.value
    );
    if (passwordLogin) {
      this.loginView();
    }
    this.passwordFormLoading = false;
    this.cdr.detectChanges();
  }

  login(): void {
    if (this.authService.sessionToken === undefined) {
      this.passwordInput();
    }
    const loginStatus = this.authService.login();
    if (loginStatus) {
      this.router.navigate(['/home']);
    }
  }

  keyInput(): void {
    this.authService.sessionToken = undefined;
    this.switchWindows(true, false, false);
  }

  passwordInput(): void {
    this.authService.sessionToken = undefined;
    this.switchWindows(false, true, false);
    this.setPasswordState(
      'Enter Password to log in with PGP key ' + this.authService.mutableKeyStore.getPrivateKeyId()
    );
  }

  loginView(): void {
    this.switchWindows(false, false, true);
    this.authService.setState('Click button to log in');
  }

  switchWindows(divOneStatus: boolean, divTwoStatus: boolean, divThreeStatus: boolean): void {
    const divOne = document.getElementById('one');
    const divTwo = document.getElementById('two');
    const divThree = document.getElementById('three');
    this.toggleDisplay(divOne, divOneStatus);
    this.toggleDisplay(divTwo, divTwoStatus);
    this.toggleDisplay(divThree, divThreeStatus);
  }

  toggleDisplay(element: any, active: boolean): void {
    const style: string = window.getComputedStyle(element).display;
    if (active) {
      element.style.display = 'block';
    } else {
      element.style.display = 'none';
    }
  }

  setPasswordState(s): void {
    document.getElementById('passwordState').innerHTML = s;
  }
}