import {Component} from '@angular/core';
import {MatSidenavContainer} from "@angular/material/sidenav";
import {MatFormFieldModule} from "@angular/material/form-field";
import {MatInput} from "@angular/material/input";
import {MatTooltip} from "@angular/material/tooltip";
import {MatIcon} from "@angular/material/icon";
import {MatButton, MatIconButton} from "@angular/material/button";
import {MatCard} from "@angular/material/card";
import {FormBuilder, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
import {FocusNextDirective} from "@/directives/focus-next.directive";
import {DataSpinnerComponent} from "@component/common/data-spinner/data-spinner.component";
import AuthApiService from "@api/v1/authApiService";
import {Router} from "@angular/router";
import {catchError, of} from "rxjs";

@Component({
  selector: 'app-login',
  standalone: true,
  imports: [
    MatSidenavContainer,
    MatFormFieldModule,
    MatInput,
    MatTooltip,
    MatIcon,
    MatIconButton,
    MatButton,
    MatCard,
    ReactiveFormsModule,
    FocusNextDirective,
    DataSpinnerComponent
  ],
  templateUrl: './login.component.html',
  styleUrl: './login.component.css',
  providers: [AuthApiService]
})
export class LoginComponent {
  protected loginForm!: FormGroup;
  protected hidePass: boolean = true;
  protected loaderActive: boolean = false;
  protected loginButtonIsDisable: boolean = true;
  protected errorText: string = '';

  constructor(private formBuilder: FormBuilder, private auth: AuthApiService, private route: Router) {
    this.auth.getRole()
      .subscribe(data => {
        if (data != null)
          route.navigate(['admin']).then();
      });

    this.loginForm = this.formBuilder.group({
        user: ['',],
        password: ['',]
      }
    );

    this.loginForm.get('password')?.setValidators([
      Validators.required,
      Validators.minLength(8)
    ]);

    this.loginForm.get('user')?.setValidators([
      Validators.required,
      Validators.minLength(4)
    ]);

    this.loginForm.valueChanges.subscribe(() => {
      this.loginButtonIsDisable = !this.loginForm.valid;
    });
  }

  protected togglePassword(event: MouseEvent) {
    this.hidePass = !this.hidePass;
    event.stopPropagation();
  }

  protected login() {
    this.loaderActive = true;

    this.auth.login({
      username: this.loginForm.get('user')?.value,
      password: this.loginForm.get('password')?.value
    })
      .pipe(catchError(error => {
        this.loaderActive = false;
        this.errorText = error.error;
        this.loginButtonIsDisable = true;
        throw error;
      }))
      .subscribe(_ => {
        this.loaderActive = false;
        this.errorText = '';
        this.route.navigate(['admin']).then();
      });
  }
}