import { Component, inject, signal } from "@angular/core";
import { FormControl, FormGroup, ReactiveFormsModule, Validators } from "@angular/forms";
import { AuthService } from "../../services/auth-service";
import { RegisterUserRequest } from "../../../../core/models/user.model";
import { Error } from "../../../../shared/components/error/error";
import { Router, RouterLink } from "@angular/router";

@Component({
  selector: "app-register",
  imports: [ReactiveFormsModule, Error, RouterLink],
  templateUrl: "./register.html",
  styleUrl: "./register.css",
})
export class Register {
  authService = inject(AuthService);
  router = inject(Router);
  errors = signal<string[]>([]);

  registerForm = new FormGroup({
    name: new FormControl("", { validators: [Validators.required] }),
    email: new FormControl("", { validators: [Validators.required, Validators.email] }),
    mobile_number: new FormControl("", { validators: [Validators.required] }),
    password: new FormControl("", { validators: [Validators.required] }),
    password_confirmation: new FormControl("", { validators: [Validators.required] }),
    city: new FormControl("", { validators: [Validators.required] }),
  });

  registerUser() {
    // validation errors if user submit early
    if (this.registerForm.invalid) {
      this.registerForm.markAllAsTouched();
      return;
    }

    this.authService.register(this.registerForm.value as RegisterUserRequest).subscribe({
      next: () =>
        this.router.navigate(["/login"], { state: { message: "Registration successful!" } }),
      error: (error) => {
        const errors: Record<number, string[]> = error?.error?.errors || {};
        const errorMessages: string[] = Object.values(errors).flat();
        this.errors.set(errorMessages);
      },
    });
  }
}