import {Component, Input, OnDestroy, OnInit, ViewChild} from "@angular/core";
import {User} from "../login/utils/helper.class";
import {ActivatedRoute, Router} from "@angular/router";
import {UserManagementService} from "../services/user-management.service";
import {UserRegistryService} from "../services/user-registry.service";
import {LoginErrorCodes} from "../login/utils/guardHelper.class";
import {Subscriber} from "rxjs";
import {FormBuilder, FormControl, Validators} from "@angular/forms";
import {AlertModal} from "../utils/modal/alert";

@Component({
  selector: 'role-verification',
  template: `
    <modal-alert #managerModal>
      <div>
        You have been invited to join <span class="uk-text-bold">{{name}}</span> Monitor Dashboard as a manager.
        <span class="portal-color">Fill</span> in the <span class="portal-color">verification code</span>, sent to your
        email, to accept the invitation request.
      </div>
      <div *ngIf="!loading" class="uk-margin-medium-top uk-flex uk-flex-center">
        <div dashboard-input [formInput]="code" [extraLeft]="false" class="uk-width-medium" placeholder="Write verification code">
          <div *ngIf="error" class="uk-text-danger uk-margin-remove uk-width-1-1">{{error}}</div>
        </div>
      </div>
      <div *ngIf="loading" class="uk-margin-medium-top">
        <loading></loading>
      </div>
      <div class="uk-margin-medium-top uk-flex uk-flex-right">
        <button class="uk-button uk-button-default uk-margin-medium-right" [class.uk-disabled]="loading"
                (click)="cancel(managerModal)">Cancel
        </button>
        <button class="uk-button" [class.portal-button]="code.valid" [class.uk-disabled]="code.invalid || loading"
                (click)="verifyManager()">Accept
        </button>
      </div>
    </modal-alert>
    <modal-alert #memberModal>
      <div *ngIf="!isMember">
        <div>
          You have been invited to join <span class="uk-text-bold">{{name}}</span> Monitor Dashboard as a member.
          <span class="portal-color">Fill</span> in the <span class="portal-color">verification code</span>, sent to
          your
          email, to accept the invitation request.
        </div>
        <div *ngIf="!loading" class="uk-margin-medium-top uk-flex uk-flex-wrap uk-flex-center">
          <div dashboard-input [formInput]="code" [extraLeft]="false" class="uk-width-medium" placeholder="Write verification code">
            <div *ngIf="error" class="uk-text-danger uk-margin-remove uk-width-1-1">{{error}}</div>
          </div>
        </div>
        <div *ngIf="loading" class="uk-margin-medium-top">
          <loading></loading>
        </div>
        <div class="uk-margin-medium-top uk-flex uk-flex-right">
          <button class="uk-button uk-button-default uk-margin-medium-right" [class.uk-disabled]="loading"
                  (click)="cancel(memberModal)">Cancel
          </button>
          <button class="uk-button" [class.portal-button]="code.valid" [class.uk-disabled]="code.invalid || loading"
                  (click)="verifyMember()">Accept
          </button>
        </div>
      </div>
      <div *ngIf="isMember">
        <div>
          Welcome! You are now a member of <span class="uk-text-bold">{{name}}</span>!
          From now on, you will have access to our restricted content.
        </div>
        <div class="uk-margin-medium-top uk-flex uk-flex-right">
          <button class="uk-button uk-button-default" [class.uk-disabled]="loading"
                  (click)="cancel(memberModal)">Close
          </button>
        </div>
      </div>
    </modal-alert>
    <modal-alert #errorModal (alertOutput)="cancel(errorModal)">
      <div>
        We are unable to process the request because the link is invalid, or it has expired.
      </div>
    </modal-alert>
  `
})
export class RoleVerificationComponent implements OnInit, OnDestroy {
  
  @Input()
  public id: string;
  @Input()
  public type: string;
  @Input()
  public name: string;
  public user: User;
  public verification: any;
  public code: FormControl;
  private subs: any[] = [];
  @ViewChild('managerModal') managerModal: AlertModal;
  @ViewChild('memberModal') memberModal: AlertModal;
  @ViewChild('errorModal') errorModal: AlertModal;
  public error: string = null;
  public loading: boolean = false;
  public isMember: boolean = false;
  
  constructor(private route: ActivatedRoute,
              private router: Router,
              private fb: FormBuilder,
              private userManagementService: UserManagementService,
              private userRegistryService: UserRegistryService) {
  }
  
  ngOnInit() {
    this.reset();
    this.subs.push(this.route.queryParams.subscribe(params => {
      if (params && params['verify']) {
        this.subs.push(this.userManagementService.getUserInfo(false).subscribe(user => {
          this.user = user;
          if (this.user) {
            this.subs.push(this.userRegistryService.getInvitation(params['verify']).subscribe(verification => {
              this.verification = verification;
              if (this.user.email === this.verification.email && this.id === this.verification.entity && this.type === this.verification.type) {
                if (this.verification.verificationType === 'manager') {
                  this.openManagerModal();
                } else if (this.verification.verificationType === 'member') {
                  this.openMemberModal();
                }
              } else {
                this.openErrorModal();
              }
            }, error => {
              this.openErrorModal();
            }));
          } else {
            this.router.navigate(['/user-info'], {
              queryParams: {
                'errorCode': LoginErrorCodes.NOT_LOGIN,
                'redirectUrl': this.router.url
              }
            });
          }
        }));
      }
    }));
  }
  
  ngOnDestroy() {
    this.subs.forEach(value => {
      if (value instanceof Subscriber) {
        value.unsubscribe();
      }
    });
  }
  
  public openManagerModal() {
    this.error = null;
    this.managerModal.okButton = false;
    this.managerModal.cancelButton = false;
    this.managerModal.alertTitle = 'Manager Invitation';
    this.managerModal.open();
  }
  
  public openMemberModal() {
    this.error = null;
    this.memberModal.okButton = false;
    this.memberModal.cancelButton = false;
    this.memberModal.alertTitle = 'Member Invitation';
    this.memberModal.open();
  }
  
  public openErrorModal() {
    this.error = null;
    this.errorModal.cancelButton = false;
    this.errorModal.okButtonText = 'Ok';
    this.errorModal.alertTitle = 'Invalid request';
    this.errorModal.open();
  }
  
  public verifyManager() {
    this.loading = true;
    this.subs.push(this.userRegistryService.verify(this.verification.id, this.code.value).subscribe(() => {
      this.loading = false;
      this.managerModal.cancel();
      this.error = null;
      this.subs.push(this.userManagementService.getUserInfo(false).subscribe(user => {
        this.user = user;
        this.router.navigate(['/admin/' + this.verification.entity]);
      }));
    }, error => {
      this.loading = false;
      this.error = 'The verification code is invalid';
    }));
  }
  
  public verifyMember() {
    this.loading = true;
    this.subs.push(this.userRegistryService.verify(this.verification.id, this.code.value, "member").subscribe(() => {
      this.loading = false;
      this.error = null;
      this.subs.push(this.userManagementService.getUserInfo(false).subscribe(user => {
        this.user = user;
        this.isMember = true;
      }));
    }, error => {
      this.loading = false;
      this.error = 'The verification code is invalid';
    }));
  }
  
  public reset() {
    this.code = this.fb.control('', [Validators.required, Validators.pattern('^[+0-9]{6}$')]);
  }
  
  cancel(modal: AlertModal) {
    modal.cancel();
    this.router.navigate([this.router.url.split('?')[0]]);
  }
}