import { AkitaNgFormsManager } from '@datorama/akita-ng-forms-manager';
import { untilDestroyed } from 'ngx-take-until-destroy';

@Component({
  selector: 'app-step-three',
  templateUrl: './step-three.component.html'
})
export class StepThreeComponent implements OnInit, OnDestroy {
  form: FormGroup;

  constructor(
    private builder: FormBuilder,
    private formsManager: AkitaNgFormsManager<any>
  ) { }

  ngOnInit() {
    this.form = this.builder.group({
      children: ['', Validators.required],
      childrenNames: this.builder.array([])
    });

    const createChildName = () => this.builder.control('', Validators.required);

    this.formsManager.upsert('stepThree', this.form, {
      arrControlFactory: {
        childrenNames: createChildName
      }
    });

    this.form
      .get('children')
      .valueChanges.pipe(untilDestroyed(this))
      .subscribe(val => {
      // Update the number of controls in the form array to match
      // the selected number of children
      });
  }

  ngOnDestroy() {
    this.formsManager.unsubscribe();
  }
}