import {Component} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
import {Router} from '@angular/router';
import {TuiAppearance, TuiButton, TuiError, TuiTextfield,} from '@taiga-ui/core';
import {TuiCardLarge, TuiForm, TuiHeader} from '@taiga-ui/layout';
import {AuthService} from '../../services/auth.service';
import {AppUserDto} from '../../models/app-user-dto';
import {HttpErrorResponse} from '@angular/common/http';
import {TuiValidationError} from '@taiga-ui/cdk';
import {environment} from '../../../environments/environment';
import {UserService} from '../../services/user.service';

@Component({
  selector: 'app-login',
  imports: [
    ReactiveFormsModule,
    TuiAppearance,
    TuiButton,
    TuiCardLarge,
    TuiForm,
    TuiHeader,
    TuiTextfield,
    TuiError,
  ],
  templateUrl: './login.component.html',
  styleUrl: './login.component.scss'
})
export class LoginComponent {
  form: FormGroup;
  protected enabled = false;
  appVersion = environment.appVersion;

  protected error = new TuiValidationError('Ongeldige gebruikersnaam of wachtwoord.');

  protected get computedError(): TuiValidationError | null {
    return this.enabled ? this.error : null;
  }

  constructor(private router: Router, private authService: AuthService, private userService: UserService) {
    this.form = new FormGroup({
      username: new FormControl('', Validators.required),
      password: new FormControl('', Validators.required)
    });
  }


  login() {
    console.log('IM LOGGING IN')
    this.authService.login(this.form.get('username').value, this.form.get('password').value).subscribe({
      next: (user: AppUserDto) => {
        this.userService.setUser(user);
        this.router.navigate(['/home/agenda']);
      },
      error: (err: HttpErrorResponse) => {
        if (err.status === 401) {
          this.enabled = true;
        }
      },
    });
  }
}