import { Component, OnDestroy, OnInit, inject } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { Subscription, debounceTime, map } 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();
    }
  }
}