import {Component, inject, OnDestroy} from '@angular/core';
import {MatError, MatFormField, MatLabel} from '@angular/material/form-field';
import {FormBuilder, ReactiveFormsModule, Validators} from '@angular/forms';
import {AuthService} from '../../../services/auth.service';
import {Router} from '@angular/router';
import {Subscription} from 'rxjs';
import {Credentials} from '../../../interfaces/credentials';
import {User} from '../../../interfaces/user';
import {MatInput} from '@angular/material/input';
import {MatButton} from '@angular/material/button';

@Component({
  selector: 'app-login',
  standalone: true,
  imports: [
    MatFormField,
    MatLabel,
    MatError,
    ReactiveFormsModule,
    MatInput,
    MatButton
  ],
  templateUrl: './login.component.html',
  styleUrl: './login.component.css'
})
export class LoginComponent implements OnDestroy {

  private readonly formBuilder: FormBuilder = inject(FormBuilder);
  private readonly authService: AuthService = inject(AuthService);
  private readonly router: Router = inject(Router);

  private loginSubscription: Subscription | null = null;

  loginFormGroup = this.formBuilder.group({
    username: ['', [
      Validators.required
    ]],
    password: ['', [
      Validators.required
    ]]
  });

  invalidCredentials = false;

  ngOnDestroy() {
    this.loginSubscription?.unsubscribe();
  }

  login() {
    this.loginSubscription = this.authService.login(
      this.loginFormGroup.value as Credentials).subscribe({
      next: (result: User | null | undefined) => {
        console.log(result);
        this.navigateHome();
      },
      error: (error) => {
        console.log(error);
        this.invalidCredentials = true;
      }
    });
  }

  navigateHome() {
    this.router.navigate(['/home']).then();
  }
}