import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
import { FormArray, FormGroup } from '@angular/forms';
import { takeUntil } from 'rxjs/operators';
import { BaseComponent } from '../../core/common/base/base.component';
import { Field } from '../../models/datasetProfileAdmin/Field';
import { FieldSet } from '../../models/datasetProfileAdmin/FieldSet';
import { Page } from '../../models/datasetProfileAdmin/Page';
import { Section } from '../../models/datasetProfileAdmin/Section';
import { JsonSerializer } from '../../utilities/JsonSerializer';

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

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

	constructor() { super(); }

	ngOnInit() {
		this.form.root.get('pages').valueChanges
			.pipe(takeUntil(this._destroyed))
			.subscribe(x =>
				this.keepPageSelectionValid(x)
			);
	}

	addField() {
		const fieldSet: FieldSet = new FieldSet();
		const 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() {
		const 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>) {
		const selectedPage = this.form.get('page').value as String;
		const pages: Array<Page> = JsonSerializer.fromJSONArray(pagesJson, Page);
		if (pages.find(elem => elem.id === selectedPage) === undefined) {
			this.form.get('page').reset();
		}
	}
}