import {Component, inject, OnDestroy, OnInit} from '@angular/core';
import {FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
import {MatSnackBarModule} from '@angular/material/snack-bar';
import {debounceTime, map, Subscription} from 'rxjs';
import {LoginService} from './login.service';
import {MatIconModule} from '@angular/material/icon';
import {RouterModule} from '@angular/router';
import {SubmitButtonComponent} from "../../components/submit-button/submit-button.component";
import {MatRippleModule} from '@angular/material/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrl: './login.component.scss',
  imports: [
    MatIconModule,
    MatRippleModule,
    ReactiveFormsModule,
    RouterModule,
    SubmitButtonComponent
  ],
  providers: [LoginService, MatSnackBarModule]
})
export class LoginComponent implements OnInit, OnDestroy {
  private loginService = inject(LoginService);
  private formBuilder = inject(FormBuilder);
  private subscriptions: Subscription[] = [];
  loginForm: FormGroup = this.formBuilder.group({
    email: new FormControl<string | undefined>('', [Validators.required, Validators.email]),
    password: new FormControl<string | undefined>('', [Validators.required])
  });

  ngOnInit(): void {
    const emailSubscription = this.loginForm.controls['email'].valueChanges
      .pipe(
        debounceTime(300),
        map(value => value?.length ? value as string : '')
      )
      .subscribe(email => {
        this.loginService.editEmail(email);
      });
    this.subscriptions.push(emailSubscription);

    const passwordSubscription = this.loginForm.controls['password'].valueChanges
      .pipe(
        debounceTime(100),
        map(value => value?.length ? value as string : '')
      )
      .subscribe(password => {
        this.loginService.editPassword(password);
      });
    this.subscriptions.push(passwordSubscription)

    const stateSubscription = this.loginService.state$
      .subscribe(state => {
        this.loginForm.controls['email'].setValue(state.request.email, {emitEvent: false});
        this.loginForm.controls['password'].setValue(state.request.password, {emitEvent: false});
      });
    this.subscriptions.push(stateSubscription);
  }

  ngOnDestroy(): void {
    this.subscriptions.forEach(subscription => subscription.unsubscribe());
  }

  performLogin(): void {
    if (this.loginForm.valid) {
      this.loginService.performLogin();
    }
  }
}