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