import { Component, OnInit, Input, ViewEncapsulation } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { Section } from '../../models/datasetProfileAdmin/Section';
import { FormArray } from '@angular/forms';
import { DatasetProfileModel } from '../../models/datasetprofile/DatasetProfileModel';
import { FieldSet } from '../../models/datasetProfileAdmin/FieldSet';
import { Field } from '../../models/datasetProfileAdmin/Field';
import { Page } from '../../models/datasetProfileAdmin/Page';
import { JsonSerializer } from '../../utilities/JsonSerializer';

@Component({
  selector: 'section-form',
  templateUrl: './section-form.component.html',
  styleUrls: ['./section-form.component.scss'],
  encapsulation: ViewEncapsulation.None
})

export class SectionFormComponent {
  @Input() form: FormGroup;
  @Input() dataModel: Section;
  @Input() indexPath: string;

  constructor() { }

  ngOnInit() {
    this.form.root.get("pages").valueChanges.subscribe(x =>
      this.keepPageSelectionValid(x)
    );
  }

  addField() {
    let fieldSet: FieldSet = new FieldSet();
    let field: Field = new Field();
    fieldSet.fields.push(field);
    if (this.dataModel.fieldSets)
      this.dataModel.fieldSets.push(fieldSet);
    (<FormArray>this.form.get("fieldSets")).push(fieldSet.buildForm());
  }

  addSectioninSection() {
    let section: Section = new Section();
    this.dataModel.sections.push(section);
    (<FormArray>this.form.get("sections")).push(section.buildForm());
  }

  DeleteSectionInSection(index) {
    this.dataModel.sections.splice(index);
    (<FormArray>this.form.get("sections")).removeAt(index);
  }

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

  keepPageSelectionValid(pagesJson: Array<any>) {
    let selectedPage = this.form.get("page").value as String;
    let pages: Array<Page> = JsonSerializer.fromJSONArray(pagesJson, Page);
    if (pages.find(elem => elem.id === selectedPage) === undefined)
      this.form.get("page").reset();
  }
}