import { HttpClient } from '@angular/common/http';
import { Component, Inject, signal } from '@angular/core';
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
import { RouterLink } from '@angular/router';
import { apiErrorMessage } from '../shared/api-error';
import { API_BASE_URL } from '../shared/api-base-url';

@Component({
  selector: 'app-register',
  imports: [ReactiveFormsModule, RouterLink],
  template: `
    <section class="panel wide">
      <h1>Registrieren</h1>
      <form [formGroup]="form" (ngSubmit)="submit()">
        <div class="grid">
          <label>
            Benutzername
            <input formControlName="username" autocomplete="username">
          </label>
          <label>
            Anzeigename
            <input formControlName="displayName" autocomplete="name">
          </label>
        </div>
        <label>
          E-Mail
          <input type="email" formControlName="email" autocomplete="email">
        </label>
        <label>
          Passwort
          <input type="password" formControlName="password" autocomplete="new-password">
        </label>
        @if (message()) {
          <p class="message" [class.error]="failed()">{{ message() }}</p>
        }
        <button type="submit" [disabled]="form.invalid || loading()">
          {{ loading() ? 'Registrierung laeuft' : 'Registrieren' }}
        </button>
      </form>
      <div class="actions">
        <a routerLink="/login">Zum Login</a>
      </div>
    </section>
  `,
})
export class RegisterComponent {
  readonly loading = signal(false);
  readonly failed = signal(false);
  readonly message = signal('');
  readonly form;

  constructor(
    private readonly fb: FormBuilder,
    private readonly http: HttpClient,
    @Inject(API_BASE_URL) private readonly apiBaseUrl: string,
  ) {
    this.form = this.fb.nonNullable.group({
      username: ['', [Validators.required, Validators.minLength(3), Validators.pattern(/^[a-zA-Z0-9._-]+$/)]],
      displayName: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      password: ['', [Validators.required, Validators.minLength(12)]],
    });
  }

  submit(): void {
    if (this.form.invalid) {
      return;
    }

    this.loading.set(true);
    this.failed.set(false);
    this.message.set('');
    this.http.post<{ message: string }>(`${this.apiBaseUrl}/registration`, this.form.getRawValue()).subscribe({
      next: (response) => this.message.set(response.message),
      error: (error) => {
        this.failed.set(true);
        this.message.set(apiErrorMessage(error));
        this.loading.set(false);
      },
      complete: () => this.loading.set(false),
    });
  }
}