import { Component, OnInit, OnDestroy } from '@angular/core';
import { NgIf } from '@angular/common';
import { UntypedFormBuilder, UntypedFormGroup, AbstractControl, Validators, ValidatorFn, ValidationErrors, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { Title } from '@angular/platform-browser';
import { ActivatedRoute, Router, RouterLink } from '@angular/router';
import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';

import { Observable, Observer, Subscription } from 'rxjs';
import { take } from 'rxjs/operators';

import { Errors } from 'src/app/core/models';
import { UserService } from 'src/app/core/services';
import { ListErrorsComponent, ShowAuthedDirective } from 'src/app/components/shared';

@Component({
    standalone: true,
    imports: [
        NgIf, RouterLink, FormsModule, ReactiveFormsModule,
        MatFormFieldModule, MatInputModule, MatButtonModule,
        ListErrorsComponent, ShowAuthedDirective
    ],
    selector: 'huapp-auth',
    templateUrl: './auth.component.html',
    styleUrls: ['./auth.component.scss']
})
export class AuthComponent implements OnInit, OnDestroy {
    private _url: Subscription = new Subscription();
    private _user: Subscription = new Subscription();
    authType = '';
    title = '';
    btnTitle = '';
    errors!: Errors;
    isSubmitting = false;
    authForm!: UntypedFormGroup;

    constructor(
        private route: ActivatedRoute,
        private router: Router,
        private titleService: Title,
        private userService: UserService,
        private fb: UntypedFormBuilder
    ) {
        this._resetErrors();
        // use FormBuilder to create a form group
        this.authForm = this.fb.group({
            email: ['', [Validators.required, Validators.email]],
            username: '',
            firstname: '',
            lastname: '',
            phone: '',
            password: ['', Validators.required],
            confirmPassword: ''
        }, { validators: this.checkPasswords });
    }

    ngOnInit() {
        // you would normally unsubscribe from this observable subscription
        // the active route observables are exemptions from unsubribe always rule
        // see notes on: https://angular.io/guide/router#observable-parammap-and-component-reuse
        this.route.url.pipe(take(1))
        .subscribe(data => {
            // Get the last piece of the URL (it's either 'login' or 'register')
            this.authType = data[data.length - 1].path;
            // Set a title for the page accordingly
            if (this.authType === 'register') {
                this.title = 'Création de compte';
                this.btnTitle = 'Créer le compte';
                this.titleService.setTitle(`Head Up - Créer un compte`);
            } else {
                this.title = 'Se connecter';
                this.btnTitle = 'Se connecter';
                this.titleService.setTitle(`Head Up - Connexion`);
            }
            // add form control for username if this is the register page
            if (this.authType === 'register') {
                this.authForm.controls["firstname"].setValidators([Validators.required]);
                this.authForm.controls["lastname"].setValidators([Validators.required]);
                this.authForm.controls["phone"].setValidators([Validators.required]);
                this.authForm.controls["confirmPassword"].setValidators([Validators.minLength(8), Validators.required]);
            }
        });
    }

    ngOnDestroy() {
        this._user.unsubscribe();
        //this._url.unsubscribe();
    }

    submitForm() {
        this.isSubmitting = true;

        if (this.authForm.valid) {
            this._resetErrors();
            const credentials = this.authForm.value;
            const user$ = this.userService.attemptAuth(this.authType, credentials).pipe(take(1));
            this._user = user$.subscribe({
                    next: () => this.router.navigateByUrl('/'),
                    error: (err) => {
                        this.errors = err;
                        this.isSubmitting = false;
                    }
                });
        }
    }

    getErrorMessage(name: string) {
        switch (name) {
            case 'email':
                if (this.authForm.controls['email'].errors !== null) {
                    return 'Indiquez votre adresse email';
                }
                break;
            case 'firstname':
                if (this.authForm.controls['firstname'].errors !== null) {
                    return 'Vous devez indiquer votre prénnom';
                }
                break;
            case 'lastname':
                if (this.authForm.controls['lastname'].errors !== null) {
                    return 'Vous devez indiquer votre nom';
                }
                break;
            case 'phone':
                if (this.authForm.controls['phone'].errors !== null) {
                    return 'Vous devez indiquer votre numéro de téléphone';
                }
                break;
            case 'password':
                if (this.authForm.controls['password'].errors !== null) {
                    return 'Un mot de passe est obligatoire';
                }
                break;
            case 'confirmPassword':
                if (this.authForm.controls['confirmPassword'].errors !== null) {
                    return 'Une confirmation du mot de passe est obligatoire';
                }
                break;
        }
        return '';
    }

    checkPasswords: ValidatorFn = (group: AbstractControl): ValidationErrors | null => {
        if (this.authType !== 'register') {
            return null;
        }
        const pass = group.get('password')!.value;
        const confirmPass = group.get('confirmPassword')!.value
        return (pass === confirmPass && pass !== '') ? null : { notSame: true }
    }

    private _resetErrors(): void {
        this.errors = { errors: {} };
    }

}