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

@Component({
  selector: 'app-signin',
  standalone: true,
  templateUrl: './signin.component.html',
  styleUrl: './signin.component.scss',
  imports: [
    MatIconModule, 
    MatRippleModule,
    ReactiveFormsModule, 
    RouterModule, 
    SubmitButtonComponent
  ],
  providers: [SigninService, LoginService]
})
export class SigninComponent implements OnInit, OnDestroy {
  private signinService = inject(SigninService);
  private formBuilder = inject(FormBuilder);
  private subscriptions: Subscription[] = [];

  signinForm: FormGroup = this.formBuilder.group({
    pseudo: new FormControl<string | undefined>('', Validators.required),
    email: new FormControl<string | undefined>('', [Validators.required, Validators.email]),
    password: new FormControl<string | undefined>('', [Validators.required]),
    confirmPassword: new FormControl<string | undefined>('', [Validators.required])
  });

  formErrors: FormError[] = []

  ngOnInit(): void {
    const pseudoSubscription = this.signinForm.controls['pseudo'].valueChanges
        .pipe(
          debounceTime(300),
          distinctUntilChanged(),
          map(value => value?.length ? value as string : '')
        )
        .subscribe(pseudo => {
          this.signinService.editPseudo(pseudo);
        });
    this.subscriptions.push(pseudoSubscription);

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

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

    const confirmPasswordSubscription = this.signinForm.controls['confirmPassword'].valueChanges
        .pipe(
          debounceTime(300),
          distinctUntilChanged(),
          map(value => value?.length ? value as string : '')
        )
        .subscribe(confirmPassword => {
          this.signinService.editConfirmPassword(confirmPassword);
        });
    this.subscriptions.push(confirmPasswordSubscription);

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

  ngOnDestroy(): void {
    this.subscriptions.forEach(subscription => subscription.unsubscribe());
  }
  
  performSignin(): void {
    if (this.signinForm.valid) {
      this.signinService.performSignin();
    }
  }
}