import { Component, OnDestroy, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import {
  Contact,
  ContactService,
} from '@nested-forms/contact';
import { Subscription } from 'rxjs';
import { NameComponent } from './name/name.component';
import { AddressListComponent } from './address-list/address-list.component';

@Component({
  selector: 'nested-forms-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit, OnDestroy {
  contact: Contact;
  form: FormGroup;

  private subscription: Subscription;

  constructor(
    private service: ContactService,
    private fb: FormBuilder,
  ) {}

  public ngOnInit() {
    this.subscription = this.service
      .loadContact()
      .subscribe((data: Contact) => {
        this.contact = data;
        this.form = this.fb.group({
          name: NameComponent.createContactNameForm(data.name, this.fb),
          addresses: AddressListComponent.createContactAddressListForm(data.addresses, this.fb),
        });
      });
  }

  public ngOnDestroy() {
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }
}