import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
import { FormGroup, FormBuilder, Validators, FormControl, ValidationErrors, AbstractControl } from '@angular/forms';
import { Member } from '@overflow/commons-typescript/model/member';
import { Store, select } from '@ngrx/store';
import { Observable, of } from 'rxjs';
import { catchError, exhaustMap, map, tap, take } from 'rxjs/operators';

import { MemberService } from '../service/member.service';


@Component({
  selector: 'of-member-modify-password',
  templateUrl: './member-modify-password.component.html',
})
export class MemberModifyPasswordComponent implements OnInit {
  member$: Observable<Member>;
  pending$: Observable<boolean>;
  error$: Observable<any>;

  @Input() token: string;
  // @Input() member: Member;

  // @Output() modifyPassword = new EventEmitter<{token: string, password: string, confirmPassword: string}>();
  @Output() signin = new EventEmitter();

  modifyPasswordForm: FormGroup;
  password: AbstractControl;
  pwConfirm: AbstractControl;

  constructor(
    private store: Store<any>,
    private formBuilder: FormBuilder,
    private memberService: MemberService,
  ) { }

  ngOnInit() {
    this.initForm();
  }

  initForm() {
    this.modifyPasswordForm = this.formBuilder.group({
      'password': [
        '',
        [
          Validators.required,
          Validators.pattern('^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{6,}$'),
          Validators.minLength(6),
          Validators.maxLength(25),
        ]
      ],
      'pwConfirm': [
        '',
        [
          Validators.compose([
            Validators.required, this.pwMatchValidator
          ])
        ]
      ]
    });

    this.password = this.modifyPasswordForm.controls['password'];
    this.pwConfirm = this.modifyPasswordForm.controls['pwConfirm'];
  }

  pwMatchValidator(control: FormControl): ValidationErrors {
    let pw;
    if (control.parent) {
      pw = control.parent.controls['password'].value;
    }
    if (control.value !== pw) {
      return { notMatched: true };
    }
    return null;
  }

  modifyPasswordFormSubmit() {
    const formValue = Object.assign({}, this.modifyPasswordForm.value);
    // this.modifyPassword.emit({token: this.token, password: formValue.pw, confirmPassword: formValue.confirmPw});

    console.log(this.token);
    console.log(formValue.password);
    console.log(formValue.pwConfirm);
    this.memberService.resetPassword(this.token, formValue.password, formValue.pwConfirm)
      .pipe(
        tap(() => {
          this.pending$ = of(true);
        }),
        map((rmember: Member) => {
          this.member$ = of(rmember);
        }),
        catchError(err => {
          this.error$ = of(err);
          return of();
        }),
        tap(() => {
          this.pending$ = of(false);
        }),
        take(1),
    ).subscribe();
  }

  onSignin() {
    this.signin.emit();
  }
}