import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, ValidationErrors, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { first } from 'rxjs/operators';

import { AccountService } from '../account.service';
import { PasswordErrorStateMatcher } from './password-error-state-matcher';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {
  form = this.formBuilder.group({
    username: ['', Validators.required],
    email: ['', [Validators.required, Validators.email]],
    password: this.formBuilder.group({
      first: ['', [Validators.required, Validators.minLength(15)]],
      second: ['', [Validators.required, Validators.minLength(15)]],
    },
  { validators: this.passwordsEqual }),
  });
  loading = false;
  passwordErrorStateMatcher = new PasswordErrorStateMatcher();

  constructor(private accountService: AccountService,
              private formBuilder: FormBuilder,
              private router: Router,
              ) { }

  passwordsEqual(passwords: FormGroup): ValidationErrors | null {
    const password1 = passwords.get('first');
    const password2 = passwords.get('second');

    return password1 && password2 && password1.value === password2.value ? null : { mismatch: true };
  }

  readForm() {
    return {
      username: this.form.get('username').value,
      email: this.form.get('email').value,
      password: this.form.get('password').get('first').value,
    }
  }

  onRegister() {
    if (this.form.invalid) {
      return;
    }
    this.loading = true;
    this.accountService.register(this.readForm())
      .pipe(first())
      .subscribe(data => {
        this.router.navigate(['/login']);
      },
      error => {
        // TODO error handling
        console.log(error);
        this.loading = false;
      });
  }

  ngOnInit(): void { }
}