import { VisibilityRulesService } from '../../utilities/visibility-rules/visibility-rules.service';
import { FormGroup, Form, FormArray } from '@angular/forms';
import { Component, Input, OnInit, ViewEncapsulation, ChangeDetectionStrategy, AfterViewInit } from '@angular/core';
import { CompositeField } from '../../models/CompositeField';
import { Section } from '../../models/Section';
import { FormFocusService } from '../../utilities/form-focus-service/form-focus.service';


@Component({
	selector: 'app-df-section',
	templateUrl: './dynamic-form-section.html',
	styleUrls: [
		'./dynamic-form-section.css'
	],
	encapsulation: ViewEncapsulation.None,
})
export class DynamicFormSectionComponent implements OnInit, AfterViewInit {

	@Input() section: Section;
	form: FormGroup;
	@Input() pathName: string;
	@Input() path: string;
	trackByFn = (index, item) => item ? item['id'] : null;
	constructor(
		public visibilityRulesService: VisibilityRulesService,
		private formFocusService: FormFocusService
	) { }

	ngOnInit() {
		if (this.section) {
			this.form = this.visibilityRulesService.getFormGroup(this.section.id);
		}
	}

	ngAfterViewInit() {
		this.visibilityRulesService.triggerVisibilityEvaluation();
	}

	addMultipleField(fieldsetIndex: number) {
		const compositeField: CompositeField = this.section.compositeFields[fieldsetIndex].cloneForMultiplicity(fieldsetIndex);
		this.section.compositeFields[fieldsetIndex].multiplicityItems.push(compositeField);
		(<FormArray>(this.form.get('compositeFields').get('' + fieldsetIndex).get('multiplicityItems'))).push(compositeField.buildForm());
	}

	isElementVisible(fieldSet: CompositeField): boolean {
		if (!fieldSet) { return false; }
		for (let i = 0; i < fieldSet.fields.length; i++) {
			if (fieldSet.fields[i]) {
				return true;
			}
		}
		return false;
	}

	next(compositeField: CompositeField) {
		this.formFocusService.focusNext(compositeField);
	}
}