import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { FormGroup, FormBuilder, Validators  } from '@angular/forms';
import * as ModifyPasswordStore from '../../store/reset-password';
import {select, Store} from '@ngrx/store';
import { ResetPasswordSelector } from '../../store';

@Component({
  selector: 'of-member-modify-password-container',
  templateUrl: './modify-password-container.component.html',
})
export class MemberModifyPasswordContainerComponent implements OnInit {

  modifyPwForm: FormGroup;
  tokenURL: string;
  formErrors = {
    'pw': '',
    'confirmPw': ''
  };

  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private formBuilder: FormBuilder,
    private modifyPasswordStore: Store<ModifyPasswordStore.State>,
  ) { }

  ngOnInit() {
    this.tokenURL = this.activatedRoute.snapshot.queryParams['token'];
    console.log(this.tokenURL);
    this.initForm();
  }

  initForm() {
    this.modifyPwForm = this.formBuilder.group({
      'pw': [
        '',
        [
          // Validators.required,
        ]
      ],
      'confirmPw': [
        '',
        [
          // Validators.pattern('^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$'),
          // Validators.minLength(6),
          // Validators.maxLength(25)
        ]
      ],
    });

  }

  modifyPw() {
    const modifyPwValue = Object.assign({}, this.modifyPwForm.value);
    const m = {token: this.tokenURL, pw: modifyPwValue.pw, confirmPw: modifyPwValue.confirmPw};
    this.modifyPasswordStore.dispatch(new ModifyPasswordStore.ModifyPassword(m));
  }

  signinBtn() {
    this.router.navigateByUrl('/auth/signin');
  }
}