import { Component, Input, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { FieldGroup } from '../models/FieldGroup';
import { CompositeField } from '../models/CompositeField';
import { FormArray } from '@angular/forms/src/model';
import { Field } from '../models/Field';

@Component({
  selector: 'groupfield-form',
  templateUrl: './groupfield-form.component.html',
  styleUrls: []
})

export class GroupFieldFormComponent {
  @Input() form: FormGroup;
  @Input() dataModel: FieldGroup;
  @Input() indexPath: string;
  
  constructor(){}

  ngOnInit(){
    console.log("init group");
    //this.addNewField();
  }

  addNewFieldSet(){
    let compositeField: CompositeField = new CompositeField();

    let field: Field = new Field(); //create field at the same time
    compositeField.fields.push(field);
    //(<FormArray>this.form.get("compositeFields").get("fields")).push(field.buildForm());

   
    this.dataModel.compositeFields.push(compositeField);
    (<FormArray>this.form.get("compositeFields")).push(compositeField.buildForm());
    
  }

  DeleteFieldSet(index){
    this.dataModel.compositeFields.splice(index, 1);
    (<FormArray>this.form.get("compositeFields")).removeAt(index);
  }
    
}