import { Component, OnInit, NgModule, Injector, Injectable } from '@angular/core';
import { FormBuilder, FormControl, Validators, FormArray, FormGroup, AbstractControl, ValidatorFn, AsyncValidator, AsyncValidatorFn, ValidationErrors, NG_ASYNC_VALIDATORS } from '@angular/forms';
import { faCheck } from '@fortawesome/free-solid-svg-icons';
import { Observable } from 'rxjs';
import { UserService } from '../user.service';




const passwordValidator: ValidatorFn = (fg: FormGroup): ValidationErrors | null => {
    var pw =  fg.get('password');
    var pw2 =  fg.get('passwordre');
    if(pw2.value.length == 0){
        return null
    }
    if(pw && pw2 && pw.value !== pw2.value){
        pw2.setErrors({'passNoMatch': true});
        pw2.markAsTouched();
        return { 'passNoMatch': true };
    }else{
        pw2.setErrors(null);
        return null;
    }
}

const username: ValidatorFn = (control: FormControl): ValidationErrors | null => {
    var alias = control
    if(alias && /^w+$/.test(alias.value)==false){//if not only numbers and letters
        return { 'illegalChars': true };
    }else if(alias && /^d+$/.test(alias.value)==true){//If only numbers
        return { 'onlyNumbers': true };
    }else{
        alias.setErrors(null);
        return null;
    }
}


@Component({
    selector: 'app-create-account',
    templateUrl: './create-account.component.html',
    styleUrls: ['./create-account.component.scss'],
    providers: [UserService]
})

export class CreateAccountComponent{
    faCheck = faCheck
    constructor( private fb: FormBuilder, private userService: UserService) {
        this.userService.getUserByAlias('test')
    }


    checkUsername(control: FormControl): Promise<any> | Observable<any>{
        this.userService.getUserByAlias(control.value)
        const promise = new Promise<any>((resolve, reject) =>{
            //const user = new UserService();
            setTimeout(()=>{
                if(control.value === 'test'){
                    resolve({usernameTaken: true})
                }else{
                    resolve(null)
                }
            },1500)
        })

        return promise;
    }


    usernameCtrl =  this.fb.control('', [
        Validators.required,
        Validators.minLength(4),
        username
    ], this.checkUsername)
    emailCtrl =  this.fb.control('', [
        Validators.required,
        Validators.email
    ])
    passwordCtrl =  this.fb.control('', [
        Validators.required,
        Validators.minLength(5)
    ])
    passwordreCtrl =  this.fb.control('', [
        Validators.required,
        Validators.minLength(5)
    ])

    newAccountForm = this.fb.group({
        username: this.usernameCtrl,
        email: this.emailCtrl,
        password: this.passwordCtrl,
        passwordre: this.passwordreCtrl
    },{ validator: passwordValidator})
}

import { Injectable } from '@angular/core';
@Injectable({
    providedIn: 'root',
})

export class UserService {
    getUserByAlias(alias: any){
        console.log(alias)
        return alias
    }
}

usernameCtrl =  this.fb.control('', [
    Validators.required,
    Validators.minLength(4),
    username
], this.checkUsername,bind(this))