import {
  Component,
  EventEmitter,
  OnDestroy,
  OnInit,
  Output
} from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Subscription } from 'rxjs';
import { debounceTime, filter } from 'rxjs/operators';

import { MeyerhofForm } from './meyerhof-form';

@Component({
  selector: 'lib-meyerhof-form',
  templateUrl: './meyerhof-form.component.html',
  styleUrls: ['./meyerhof-form.component.css']
})
// On alloue l'observateur réactif dans OnInit et on le libère dans OnDestroy.
export class MeyerhofFormComponent implements OnInit, OnDestroy {
  form: FormGroup;
  private obs$!: Subscription;

  constructor(private fromBuilder: FormBuilder) {
    this.form = fromBuilder.group({
      foundation: [''],
      load: ['']
    });
  }

  submit(): void {
    console.log('MeyerhofFormComponent');
    console.log(JSON.stringify(this.form.controls.foundation.value['width']));
    console.log(JSON.stringify(this.form.controls.load.value['load']));
    console.log(JSON.stringify(this.form.controls.load.value['eccentric']));
  }

  ngOnInit(): void {
    this.obs$ = this.form.valueChanges
      .pipe(debounceTime(200))
      .pipe(filter(() => this.form.valid))
      // On force l'interface de l'objet a.
      .subscribe((a: MeyerhofForm) => {
        console.log('123/' + JSON.stringify(a.foundation.width) + '/456');
      });
  }

  ngOnDestroy(): void {
    this.obs$?.unsubscribe();
  }
}