import { Component, OnInit, Input, Output } from '@angular/core';
import { FormArray, FormControl, FormGroup, Validators, AbstractControl } from '@angular/forms';

import { Helper } from '../../helper';

@Component({
  selector: 'rss-multi-input-box',
  templateUrl: './multi-input-box.component.html',
  styleUrls: ['./multi-input-box.component.scss']
})
export class MultiInputBoxComponent implements OnInit {

  @Input() questions: any;
  @Input() formArray: FormArray;

  currentControlsArray: FormArray;

  private config: any = {};
  private readonly FIRST_ITEM: number = 0;

  constructor() { }

  ngOnInit() {
    this.setupComponentDefaults();
    this.initializeControlValues();
  }

  addRecord(event: any) {
    this.formArray.push(this.currentControlsArray.at(this.FIRST_ITEM));
    this.initializeControlValues();
  }

  removeRecord(event: any, index: number) {
    this.formArray.removeAt(index);
  }

  setupComponentDefaults() {
    if(!this.questions) { return console.error('No Input JSON provided'); }
  }

  initializeControlValues() {
    let controls: any = this.questions.map((q) => (q.key));
    this.currentControlsArray = Helper.groupToArray(controls);
  }

}