import { Component, inject } from '@angular/core';
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
import { emailValidator } from '../../../utils/validators/emailValidator';
import { SigningMethods, userModel } from '../../../models/userModel';
import { emailPasswordDistinctValidator } from '../../../utils/validators/distinctEmailPasswordValidator';
import { from } from 'rxjs';
import { Router } from '@angular/router';
import { userService } from '../../services/userService/userService';

@Component({
  selector: 'register-view',
  imports: [ReactiveFormsModule],
  templateUrl: './register-view.html',
  styleUrl: './register-view.scss',
})
export class RegisterView {
  private userService = inject(userService);
  private formBuilder = inject(FormBuilder);
  private router = inject(Router);
  form = this.formBuilder.group(
    {
      name: ['', [Validators.required]],
      email: ['', [Validators.required, emailValidator]],
      password: ['', [Validators.required, Validators.minLength(6)]],
      confirmPassword: [''],
      // preferredSigninMethod: [SigningMethods.Password],
      // profilePicture: [null],
      // bio: ['', [Validators.maxLength(500)]],
      // socialMedia: this.formBuilder.group({
      //   facebook: [''],
      //   twitter: [''],
      //   instagram: [''],
      // }),
      // termsAccepted: [false, [Validators.requiredTrue]],
    },
    { validators: emailPasswordDistinctValidator }
  );

  get name() {
    return this.form.get('name');
  }

  get email() {
    return this.form.get('email');
  }

  get password() {
    return this.form.get('password');
  }

  get confirmPassword() {
    return this.form.get('confirmPassword');
  }

  get bio() {
    return this.form.get('bio');
  }

  get socialMedia() {
    return this.form.get('socialMedia');
  }

  get profilePicture() {
    return this.form.get('profilePicture');
  }

  get preferredSigninMethod() {
    return this.form.get('preferredSigninMethod');
  }

  // getTermsAccepted() {
  //   return this.form.value.termsAccepted;
  // }

  onSubmit() {
    if (this.form.valid) {
      const email = this.form.value.email;
      const password = this.form.value.password;
      const name = this.form.value.name;
      from(this.userService.register(name, email, password)).subscribe({
        next: (user) => {
          this.router.navigate(['/']);
        },
        error: (error) => {
          console.error('Register error:', error);
        },
      });
    }
  }

  hasNameContent(): boolean {
    const nameValue = this.name?.value;
    return nameValue ? nameValue.trim().length > 0 : false;
  }

  hasEmailContent(): boolean {
    const emailValue = this.email?.value;
    return emailValue ? emailValue.trim().length > 0 : false;
  }

  hasPasswordContent(): boolean {
    const passwordValue = this.password?.value;
    return passwordValue ? passwordValue.trim().length > 0 : false;
  }

  hasConfirmPasswordContent(): boolean {
    const confirmPasswordValue = this.confirmPassword?.value;
    return confirmPasswordValue
      ? confirmPasswordValue.trim().length > 0
      : false;
  }

  emailHasErrors(): boolean {
    const emailControl = this.email;
    return emailControl
      ? this.hasEmailContent() &&
          emailControl.invalid &&
          (emailControl.dirty || emailControl.touched)
      : false;
  }

  passwordHasErrors(): boolean {
    const passwordControl = this.password;
    return passwordControl
      ? this.hasPasswordContent() &&
          passwordControl.invalid &&
          (passwordControl.dirty || passwordControl.touched)
      : false;
  }

  confirmPasswordHasErrors(): boolean {
    const confirmPasswordControl = this.confirmPassword;
    return confirmPasswordControl
      ? this.hasConfirmPasswordContent() &&
          confirmPasswordControl.invalid &&
          (confirmPasswordControl.dirty || confirmPasswordControl.touched)
      : false;
  }
}