import { Component, OnInit } from '@angular/core';
import { Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { PortalDeterminationService } from '@core/services/portal-determination.service';
import { SpinnerService } from '@core/services/spinner.service';
import { VerificationCodeService } from '@core/services/token/verification-code.service';
import { AuthState } from '@core/states/auth.state';
import { PanelTypes, TypeSafeFormBuilder, TypeSafeFormGroup } from '@yourcause/common';
import { I18nService } from '@yourcause/common/i18n';

interface VerificationCodeFormGroup {
  code: string;
  rememberMe: boolean;
}
@Component({
  selector: 'gc-verification-code-page',
  templateUrl: './verification-code-page.component.html',
  styleUrls: ['./verification-code-page.component.scss']
})
export class VerificationCodePageComponent implements OnInit {
  PanelTypes = PanelTypes;
  formGroup: TypeSafeFormGroup<VerificationCodeFormGroup>;
  username = this.authState.username;
  password = this.authState.password;
  rememberMe = false;
  loading: boolean;
  codeExpired = false;
  codeInvalid = false;
  codeInvalidText = this.i18n.translate(
    'login:textTheCodeEnteredIsNotValid',
    {},
    'The code you entered is not valid. Click below to resend'
  );
  codeExpiredText = this.i18n.translate(
    'login:textTheCodeEnteredIsExpired',
    {},
    'The code you entered is expired. Click below to resend'
  );

  constructor (
    private formBuilder: TypeSafeFormBuilder,
    private verificationCodeService: VerificationCodeService,
    private i18n: I18nService,
    private spinnerService: SpinnerService,
    private authState: AuthState,
    private router: Router,
    private portal: PortalDeterminationService,
    private activatedRoute: ActivatedRoute
  ) { }

  ngOnInit () {
    if (!this.username || !this.password) {
      this.router.navigate(['../'], {
        relativeTo: this.activatedRoute
      });
    }
    this.formGroup = this.formBuilder.group<VerificationCodeFormGroup>({
      code: ['', Validators.required],
      rememberMe: false
    });

    this.handleSubmit = this.handleSubmit.bind(this);
  }

  async resendSecurityCode () {
    this.spinnerService.startSpinner();
    await this.verificationCodeService.resendVerificationCode(
      this.username,
      this.portal.getUserType()
    );
    this.spinnerService.stopSpinner();
  }

  async handleSubmit () {
    this.spinnerService.startSpinner();
    const response = await this.verificationCodeService.loginWithVerificationCode(
      this.username,
      this.password,
      this.formGroup.value.code,
      this.formGroup.value.rememberMe
    );
    this.codeInvalid = response?.codeInvalid;
    this.codeExpired = response?.codeExpired;
    this.spinnerService.stopSpinner();
  }
}