import { ChangeDetectorRef, Component, Input, OnChanges, OnInit } from '@angular/core';
import { AbstractControl, FormArray, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';
import { FieldEditorModel } from '../../../admin/field-editor-model';
import { Guid } from '@common/types/guid';
import { RuleEditorModel } from '../../../admin/rule-editor-model';
import { ValidationType } from '@app/core/common/enum/validation-type';
import { MatCheckboxChange } from '@angular/material/checkbox';
import { DatasetDescriptionCompositeFieldEditorModel, DatasetDescriptionFieldEditorModel, DatasetDescriptionFormEditorModel, DatasetDescriptionSectionEditorModel } from '@app/ui/misc/dataset-description-form/dataset-description-form.model';
import { DatasetProfileFieldViewStyle } from '@app/core/common/enum/dataset-profile-field-view-style';
import { MatDialog } from '@angular/material';
import { ConfirmationDialogComponent } from '@common/modules/confirmation-dialog/confirmation-dialog.component';
import { TranslateService } from '@ngx-translate/core';
import { ViewStyleType } from '../field/view-style-enum';
import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
import { BooleanDecisionFieldDataEditorModel } from '../../../admin/field-data/boolean-decision-field-data-editor-model';
import { CheckBoxFieldDataEditorModel } from '../../../admin/field-data/check-box-field-data-editor-model';
import { WordListFieldDataEditorModel } from '../../../admin/field-data/word-list-field-data-editor-model';
import { AutoCompleteFieldDataEditorModel } from '../../../admin/field-data/auto-complete-field-data-editor-model';
import { ResearchersAutoCompleteFieldDataEditorModel } from '../../../admin/field-data/researchers-auto-complete-field-data-editor-model';
import { FreeTextFieldDataEditorModel } from '../../../admin/field-data/free-text-field-data-editor-model';
import { RadioBoxFieldDataEditorModel } from '../../../admin/field-data/radio-box-field-data-editor-model';
import { TextAreaFieldDataEditorModel } from '../../../admin/field-data/text-area-field-data-editor-model';
import { DatePickerDataEditorModel } from '../../../admin/field-data/date-picker-data-editor-models';
import { ExternalDatasetsDataEditorModel } from '../../../admin/field-data/external-datasets-data-editor-models';
import { DataRepositoriesDataEditorModel } from '../../../admin/field-data/data-repositories-data-editor-models';
import { RegistriesDataEditorModel } from '../../../admin/field-data/registries-data-editor-models';
import { ServicesDataEditorModel } from '../../../admin/field-data/services-data-editor-models';
import { TagsDataEditorModel } from '../../../admin/field-data/tags-data-editor-models';
import { DatasetsAutoCompleteFieldDataEditorModel } from '../../../admin/field-data/datasets-autocomplete-field-data-editor-mode';
import { DatasetIdentifierDataEditorModel } from '../../../admin/field-data/dataset-identifier-data-editor-models';
import { CurrencyDataEditorModel } from '../../../admin/field-data/currency-data-editor-models';
import { ValidationDataEditorModel } from '../../../admin/field-data/validation-data-editor-models';
import { DatasetProfileService } from '@app/core/services/dataset-profile/dataset-profile.service';
import { OrganizationsDataEditorModel } from '../../../admin/field-data/organizations-data-editor-models';
import { EditorCustomValidators } from '../../custom-validators/editor-custom-validators';
import { Field, FieldSet } from '@app/core/model/admin/dataset-profile/dataset-profile';
import { DatasetProfileComboBoxType } from '@app/core/common/enum/dataset-profile-combo-box-type';
import { DatasetProfileInternalDmpEntitiesType } from '@app/core/common/enum/dataset-profile-internal-dmp-entities-type';
import { AutoCompleteFieldData, BooleanDecisionFieldData, CheckBoxFieldData, CurrencyFieldData, DataRepositoriesFieldData, DatasetIdentifierFieldData, DatePickerFieldData, DmpsAutoCompleteFieldData, ExternalDatasetsFieldData, FieldDataOption, FreeTextFieldData, OrganizationsFieldData, RadioBoxFieldData, RegistriesFieldData, ResearchersAutoCompleteFieldData, ServicesFieldData, TagsFieldData, TextAreaFieldData, ValidationFieldData, WordListFieldData } from '@app/core/model/dataset-profile-definition/field-data/field-data';
import { CompositeField } from '@app/core/model/dataset-profile-definition/composite-field';
import {Field as FieldDefinition} from '@app/core/model/dataset-profile-definition/field';
import { Subject } from 'rxjs';
import { debounce, debounceTime } from 'rxjs/operators';
import { setUncaughtExceptionCaptureCallback } from 'process';
import { GENERAL_ANIMATIONS } from '../../animations/animations';

@Component({
	selector: 'app-dataset-profile-editor-composite-field-component',
	templateUrl: './dataset-profile-editor-composite-field.component.html',
	styleUrls: ['./dataset-profile-editor-composite-field.component.scss'],
	animations:[GENERAL_ANIMATIONS]
})
export class DatasetProfileEditorCompositeFieldComponent implements OnInit, OnChanges {

	@Input() form: FormGroup;
	@Input() indexPath: string;
	@Input() viewOnly: boolean;

	@Input() numbering: string;
	@Input() hasFocus: boolean = false;
	
	showPreview: boolean  = true;
	previewDirty: boolean = false;


	showDescription: boolean = true;
	showAdditionalInfo: boolean = false;
	showExtendedDescription: boolean = false;

	previewForm: FormGroup = null;
	// isComposite = false;
	// isMultiplicityEnabled = false;
	viewStyleEnum = DatasetProfileFieldViewStyle;

	viewTypeEnum =  ViewStyleType;

	private myCustomValidators:EditorCustomValidators = new EditorCustomValidators();

	constructor(
		private dialog: MatDialog,
		private language: TranslateService,
		public enumUtils: EnumUtils,
		public datasetProfileService: DatasetProfileService
		) { }

	ngOnChanges(){
		// this.setTargetField(null);
		// this.showExtendedDescription = !!this.form.get('extendedDescription').value;
		// this.showAdditionalInfo = !!this.form.get('additionalInformation').value;
	}

	get firstField(){
		try{
			return (this.form.get('fields') as FormArray).at(0);
		}catch{
			return null;
		}
	}

	get isMultiplicityEnabled(){
		if(!this.form.get('multiplicity')){
			return false;
		}

		if (this.form.get('multiplicity').value.min > 0 || this.form.get('multiplicity').value.max > 0) {
			return true;
		}

		return false;
	}


	ngOnInit() {
		//this.addNewField();
		// if (this.form.get('multiplicity')) {
		// 	if (this.form.get('multiplicity').value.min > 1 || this.form.get('multiplicity').value.max > 1) {
		// 		this.isMultiplicityEnabled = true;
		// 	}
		// }
		// this.isComposite = (this.form.get('fields') as FormArray).length > 1;

		if (this.viewOnly) {
			this.form.get('hasCommentField').disable();
		}

		//SET UP TARGET FIELD
		// if((this.form.get('fields') as FormArray).length>0){
		// 	//get the first field in list
		// 	this.targetField = (this.form.get('fields') as FormArray).at(0) as FormGroup;
		// }

		this.showExtendedDescription = !!this.form.get('extendedDescription').value;
		this.showAdditionalInfo = !!this.form.get('additionalInformation').value;

		this.form.valueChanges.subscribe(changes=>{
			// this.previewForm = null;
			this.previewDirty = true;
			this.generatePreviewForm();
			
		});
		this.previewSubject$.pipe(debounceTime(600)).subscribe(model=>{
			const updatedForm = model.buildForm();
			this.reloadPreview(updatedForm)
		})


		this.generatePreviewForm();
	}


	get updatedClass(){
		if(this.previewDirty) return '';
		else return 'updated';
	}
	private reloadPreview(updatedForm: FormGroup){
		setTimeout(() => {
			
			const previewContainer = document.getElementById('preview_container'+ this.form.get('id').value);
			// let clientHeight = -1;
			if(previewContainer){
				// console.log(previewContainer);
				const clientHeight = previewContainer.clientHeight;
				// console.log(clientHeight);

				if(clientHeight){
					previewContainer.style.height = clientHeight.toString() + 'px';

					// console.log('height:' ,previewContainer.style.height);
				}
			}
			this.showPreview = false;
			this.previewDirty = true;
			this.previewForm = updatedForm;

			setTimeout(() => {

				
				this.showPreview = true;
				this.previewDirty = false;

				if(previewContainer){
					setTimeout(() => {
						if(previewContainer){
							previewContainer.style.height = 'auto';
						}
					});
				}
			});	
		});
	}

	previewSubject$: Subject<DatasetDescriptionSectionEditorModel> = new Subject<DatasetDescriptionSectionEditorModel>();

	private generatePreviewForm(){
		const formValue:FieldSet = this.form.getRawValue();
			const fields:FieldDefinition[] = formValue.fields.map(editorField=>this._fieldToFieldDefinition(editorField));
			

			const compositeField: CompositeField = {
				id: formValue.id,
				additionalInformation: formValue.additionalInformation,
				extendedDescription: formValue.extendedDescription,
				numbering:'',
				title: formValue.title,
				ordinal: formValue.ordinal,
				description: formValue.description,
				hasCommentField: formValue.hasCommentField,
				commentFieldValue: '',
				multiplicity: {max:formValue.multiplicity.max, min : formValue.multiplicity.min},
				multiplicityItems:null,
				fields: fields.map(editorField=>{
					const model = new DatasetDescriptionFieldEditorModel().fromModel(editorField);
					if(model.viewStyle.renderStyle === this.viewStyleEnum.CheckBox){
						model.value  = model.value?"true":"false";//patch
					}
					return  model;
				})
			}	


			const section = new  DatasetDescriptionSectionEditorModel();
			section.title = '';
			section.numbering = '';

			const compositeForm = new DatasetDescriptionCompositeFieldEditorModel().fromModel(compositeField)
			section.compositeFields = [compositeForm];

			this.previewSubject$.next(section);
	}


	private _fieldToFieldDefinition(editorField: Field): FieldDefinition{
		const field = {
			id: editorField.id,
			title: '',
			page: editorField.page,
			numbering:'',
			multiplicity:null,
			multiplicityItems: null,
			viewStyle: editorField.viewStyle,
			defaultValue:editorField.defaultValue,
			value: null,
			validations: editorField.validations,
		} as FieldDefinition;

		field.data = editorField.data;

		// return new DatasetDescriptionFieldEditorModel().fromModel(field);
		return field;
	}


	// generatePreview(){
	// 	const editorModel = new DatasetDescriptionCompositeFieldEditorModel();
	// 	editorModel.title = this.form.get('title').value;
	// 	editorModel.description = this.form.get('description').value;
	// 	editorModel.extendedDescription = this.form.get('extendedDescription').value;
	// 	editorModel.additionalInformation = this.form.get('additionalInformation').value;
	// 	editorModel.hasCommentField = this.form.get('hasCommentField').value;
	// 	editorModel.fields = [];

	// 	(this.form.get('fields') as FormArray).controls.forEach(field=>{
	// 		const fieldEditorModel = new DatasetDescriptionFieldEditorModel();
			
	// 		fieldEditorModel.viewStyle= {
	// 				renderStyle: field.get('viewStyle').get('renderStyle').value,
	// 				cssClass: null
	// 			};
	// 		fieldEditorModel.defaultValue = field.get('defaultValue').value;
	// 		switch (field.get('viewStyle').get('renderStyle').value) {
	// 			case DatasetProfileFieldViewStyle.TextArea:
	// 				fieldEditorModel.data = { 
	// 					label: field.get('data').get('label').value
	// 				};
	// 				break;
			
	// 			default:
	// 				break;
	// 		}
			

	// 		editorModel.fields.push(fieldEditorModel);
	// 	});


	// 	this.previewForm = editorModel.buildForm();
	// }

	onIsCompositeChange(isComposite: boolean) {
		if (!isComposite && (<FormArray>this.form.get('fields')).length > 1) {
			for (let i = 0; i < (<FormArray>this.form.get('fields')).length - 1; i++) {
				(<FormArray>this.form.get('fields')).removeAt(1);
			}
			(this.form.get('fields') as FormArray).controls.splice(1);
		}
		if ((<FormArray>this.form.get('fields')).length === 0) {
			const field: FieldEditorModel = new FieldEditorModel();
			(<FormArray>this.form.get('fields')).push(field.buildForm());
		}
	}

	onIsMultiplicityEnabledChange(isMultiplicityEnabled: MatCheckboxChange) {

		const multiplicity = this.form.get('multiplicity') as FormGroup;

		const minControl = multiplicity.get('min');
		const maxControl = multiplicity.get('max');

		if (isMultiplicityEnabled.checked) {
			minControl.setValue(0);
			maxControl.setValue(1);
		}else{
			minControl.setValue(0);
			maxControl.setValue(0);
		}

		minControl.updateValueAndValidity();
		maxControl.updateValueAndValidity();
		
	}

	addNewField() {
		const field: FieldEditorModel = new FieldEditorModel();
		field.id=Guid.create().toString();

		field.ordinal = (this.form.get('fields') as FormArray).length;

		const fieldForm = field.buildForm();
		// fieldForm.setValidators(this.customFieldValidator());
		
		// fieldForm.get('viewStyle').get('renderStyle').setValidators(Validators.required);

		(<FormArray>this.form.get('fields')).push(fieldForm);
		
		this.setTargetField(fieldForm);
		fieldForm.updateValueAndValidity();
	}

	DeleteField(index) {

		const fieldsForm = <FormArray>this.form.get('fields');
		fieldsForm.removeAt(index);

		// calculate ordinals
		fieldsForm.controls.forEach((field, idx)=>{
			field.get('ordinal').setValue(idx);
			field.updateValueAndValidity();
		})
	}

	getFieldTile(formGroup: FormGroup, index: number) {
		if (formGroup.get('title') && formGroup.get('title').value && formGroup.get('title').value.length > 0) { return formGroup.get('title').value; }
		return "Field " + (index + 1);
	}


	targetField:FormGroup;
	validationTypeEnum = ValidationType;


	addVisibilityRule(targetField: FormGroup){
		const rule: RuleEditorModel = new RuleEditorModel();
		(<FormArray>targetField.get('visible').get('rules')).push(rule.buildForm());
	}
	toggleRequired(targetField: FormGroup, event:MatCheckboxChange){
		
		let validationsControl = targetField.get('validations') as FormControl;
		let validations: Array<ValidationType> = validationsControl.value;

		if(event.checked){
			if(!validations.includes(ValidationType.Required)){//IS ALREADY REQUIRED
				// validationsControl.setValue(validations.filter(validator=> validator != ValidationType.Required));
				// validationsControl.updateValueAndValidity();
				validations.push(ValidationType.Required);
				// validationsControl.setValue(validations);
				validationsControl.updateValueAndValidity();
			}
		}else{
			validationsControl.setValue(validations.filter(validator=> validator != ValidationType.Required));
			validationsControl.updateValueAndValidity();
		}
		
		
		// if(validations.includes(ValidationType.Required)){//IS ALREADY REQUIRED
		// 	validationsControl.setValue(validations.filter(validator=> validator != ValidationType.Required));
		// 	validationsControl.updateValueAndValidity();
		// }else{ 
		// 	//SET REQUIRED VALIDATOR
		// 	console.log('setting required validator');
		// 	validations.push(ValidationType.Required);
		// 	validationsControl.setValue(validations);
		// 	validationsControl.updateValueAndValidity();
		// }
	}
	setTargetField(field:FormGroup){
		this.targetField = field;
	}


	



	deleteTargetField(){
		
		const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
			restoreFocus: false,
			data: {
				message: this.language.instant('GENERAL.CONFIRMATION-DIALOG.DELETE-ITEM'),
				confirmButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CONFIRM'),
				cancelButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CANCEL'),
				isDeleteConfirmation: true
			}
		});
		dialogRef.afterClosed().subscribe(result => {
			if (result) {
				this._deleteTargetField();
			}
		});
	
	}


	private _deleteTargetField(){
		if(!this.targetField) return;

		let index = -1;

		const fields = this.form.get('fields') as FormArray;

		for(let i=0;i< fields.length; i++){
			let field = fields.at(i);
			if(field.get('id').value === this.targetField.get('id').value){//index found
				index = i;
				break;
			}
		}

		if(index>=0){//target found in fields
			this.DeleteField(index);
			this.targetField = null;
		}

	}

	deleteField(index: number){
		
		const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
			restoreFocus: false,
			data: {
				message: this.language.instant('GENERAL.CONFIRMATION-DIALOG.DELETE-ITEM'),
				confirmButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CONFIRM'),
				cancelButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CANCEL'),
				isDeleteConfirmation: true
			}
		});
		dialogRef.afterClosed().subscribe(result => {
			if (result) {
				this.DeleteField(index);
			}
		});
	
	}




	addNewInput(type: ViewStyleType){
		
		const fieldsArray = this.form.get('fields') as FormArray;
		
		let targetOrdinal = fieldsArray.length;
		try{
			targetOrdinal = fieldsArray.controls.map(control=> control.get('ordinal').value).reduce((a,b)=>Math.max(a,b)) +1;
		}catch{
			
		}



		const field = {
			id: Guid.create().toString(),
			ordinal: targetOrdinal,
			visible:{rules:[],style:null},
			validations:[],
			viewStyle:{}

		} as Field;


		// const field: FieldEditorModel = new FieldEditorModel();
		// field.id=Guid.create().toString();

		// field.ordinal = (this.form.get('fields') as FormArray).length;

		// const fieldForm = field.buildForm();
		// fieldForm.setValidators(this.customFieldValidator());
		// fieldForm.get('viewStyle').get('renderStyle').setValidators(Validators.required);
		
		

		// if (fieldForm.get('data')) {
		// 	fieldForm.removeControl('data');
		// }

		switch (type) {
			case this.viewTypeEnum.BooleanDecision:{
				// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.BooleanDecision)
				// fieldForm.addControl('data', new BooleanDecisionFieldDataEditorModel().buildForm());

				const data: BooleanDecisionFieldData = {
					label:''
				}

				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.BooleanDecision;
				field.data = data;

				break;
			}
			case this.viewTypeEnum.CheckBox:{

			
				// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.CheckBox)
				// fieldForm.addControl('data', new CheckBoxFieldDataEditorModel().buildForm());
				const data: CheckBoxFieldData = {
					label:''
				}

				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.CheckBox;
				field.data = data;
				
				break;
			}
			case this.viewTypeEnum.Select:{

			
				// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.ComboBox)
				// fieldForm.addControl('data', new WordListFieldDataEditorModel().buildForm());

				// fieldForm.get('data').setValidators(EditorCustomValidators.atLeastOneElementListValidator('options'));
				// fieldForm.get('data').updateValueAndValidity();

				const firstOption = {label:'', value:''} as FieldDataOption;

				const data:WordListFieldData = {
					label:'',
					multiList:false,
					options:[firstOption],
					type:DatasetProfileComboBoxType.WordList
				}

				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.ComboBox;
				field.data = data;

				break;
			}
			case this.viewTypeEnum.Other:{

			
				// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.ComboBox)
				// fieldForm.addControl('data', new AutoCompleteFieldDataEditorModel().buildForm()); //TODO SEE

				// fieldForm.get('data').setValidators(EditorCustomValidators.atLeastOneElementListValidator('autoCompleteSingleDataList'));
				// fieldForm.get('data').updateValueAndValidity();

				const data: AutoCompleteFieldData = {
					autoCompleteSingleDataList:[],
					multiAutoComplete: false,
					label:'',
					type: DatasetProfileComboBoxType.Autocomplete
				}

				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.ComboBox;
				field.data = data;

				break;
			}case this.viewTypeEnum.InternalDmpEntities:{

			
				// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.InternalDmpEntities)
				// fieldForm.addControl('data', new ResearchersAutoCompleteFieldDataEditorModel().buildForm());//TODO TO SEE
			
				const data: DmpsAutoCompleteFieldData = {
					label:'',
					multiAutoComplete: false,
					type: DatasetProfileInternalDmpEntitiesType.Dmps
				}


				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.InternalDmpEntities;
				field.data = data;

				break;
			}
			case this.viewTypeEnum.FreeText:{

			
				// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.FreeText)
				// fieldForm.addControl('data', new FreeTextFieldDataEditorModel().buildForm());

				const data: FreeTextFieldData = {
					label:''
				}

				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.FreeText;
				field.data = data;
				break;
			}
			case this.viewTypeEnum.RadioBox:{

			
				// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.RadioBox)
				// fieldForm.addControl('data', new RadioBoxFieldDataEditorModel().buildForm());
				// fieldForm.get('data').setValidators(EditorCustomValidators.atLeastOneElementListValidator('options'));
				// fieldForm.get('data').updateValueAndValidity();
				const data: RadioBoxFieldData= {
					label:'',
					options: []
				}

				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.RadioBox;
				field.data = data;

				break;
			}
			case this.viewTypeEnum.TextArea:{

			
				// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.TextArea)
				// fieldForm.addControl('data', new TextAreaFieldDataEditorModel().buildForm());

				const data: TextAreaFieldData = {
					label:''
				}

				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.TextArea;
				field.data = data;

				break;
			}
			case this.viewTypeEnum.DatePicker:{

			
				// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.DatePicker)
				// fieldForm.addControl('data', new DatePickerDataEditorModel().buildForm());
				const data: DatePickerFieldData = {
					label:''
				}

				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.DatePicker;

				break;
			}
			case this.viewTypeEnum.ExternalDatasets:{

			
				// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.ExternalDatasets)
				// fieldForm.addControl('data', new ExternalDatasetsDataEditorModel().buildForm());
				const data: ExternalDatasetsFieldData = {
					label:'',
					multiAutoComplete: false
				}

				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.ExternalDatasets;
				field.data = data;
				break;
			}
			case this.viewTypeEnum.DataRepositories:{

			
				// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.DataRepositories)
				// fieldForm.addControl('data', new DataRepositoriesDataEditorModel().buildForm());

				const data: DataRepositoriesFieldData = {
					label: '',
					multiAutoComplete: false
				}

				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.DataRepositories;
				field.data = data;

				break;
			}
			case this.viewTypeEnum.Registries:{

			
				// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Registries)
				// fieldForm.addControl('data', new RegistriesDataEditorModel().buildForm());
				
				const data:RegistriesFieldData = {
					label: '',
					multiAutoComplete: false
				}

				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.Registries;
				field.data = data;

				break;
			}
			case this.viewTypeEnum.Services:{

			
				// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Services)
				// fieldForm.addControl('data', new ServicesDataEditorModel().buildForm());

				const data:ServicesFieldData = {
					label:'',
					multiAutoComplete: false
				}

				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.Services;
				field.data = data;

				break;
			}
			case this.viewTypeEnum.Tags:{

			
				// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Tags)
				// fieldForm.addControl('data', new TagsDataEditorModel().buildForm());

				const data: TagsFieldData = {
					label:''
				}
				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.Tags;
				field.data = data;

				break;
			}
			case this.viewTypeEnum.Researchers:{

			
				// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Researchers)
				// this.form.addControl('data', new ResearchersDataEditorModel().buildForm()); //TODO TO ASK
				// fieldForm.addControl('data', new ResearchersAutoCompleteFieldDataEditorModel().buildForm());

				// field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.Researchers;
				const data : ResearchersAutoCompleteFieldData = {
					label:'',
					multiAutoComplete: false,
					type: DatasetProfileInternalDmpEntitiesType.Researchers
				}

				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.InternalDmpEntities;
				field.data  = data;

				break;
			}
			case this.viewTypeEnum.Organizations:{

			
				// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Organizations)
				// fieldForm.addControl('data', new OrganizationsDataEditorModel().buildForm());
				// this.form.addControl('data', new OrganizationsDataEditorModel().buildForm())
				// fieldForm.addControl('data', new DatasetsAutoCompleteFieldDataEditorModel().buildForm());  //TODO

				const data = {
					autoCompleteSingleDataList:[],
					label:'',
					multiAutoComplete: false,
					
				} as OrganizationsFieldData; //TODO 

				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.Organizations;
				field.data = data;

				break;
			}
			case this.viewTypeEnum.DatasetIdentifier:{

			
				// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.DatasetIdentifier)
				// fieldForm.addControl('data', new DatasetIdentifierDataEditorModel().buildForm());

				const data : DatasetIdentifierFieldData = {
					label:''
				}

				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.DatasetIdentifier;
				field.data = data;
				
				break;
			}
			case this.viewTypeEnum.Currency:{

			
				// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Currency)
				// fieldForm.addControl('data', new CurrencyDataEditorModel().buildForm());

				const data: CurrencyFieldData = {
					label:''
				}
				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.Currency;
				field.data = data;

				break;
			}
			case this.viewTypeEnum.Validation:{

			
				// fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Validation)
				// fieldForm.addControl('data', new ValidationDataEditorModel().buildForm());

				const data:ValidationFieldData = {
					label:''
				}

				field.viewStyle.renderStyle = DatasetProfileFieldViewStyle.Validation;
				field.data = data;

				break;
			}
		}

		(<FormArray>this.form.get('fields')).push(new FieldEditorModel().fromModel(field).buildForm());
		// fieldForm.get('viewStyle').get('renderStyle').updateValueAndValidity();
		// fieldForm.get('data').updateValueAndValidity();
		

	}

	// private customFieldValidator(): ValidatorFn{
	// 	return (control):ValidationErrors | null=>{
	// 		DatasetProfileFieldViewStyle
	// 		switch(control.get('viewStyle').get('renderStyle').value){

	// 			case DatasetProfileFieldViewStyle.TextArea:
	// 				return null;
	// 			case DatasetProfileFieldViewStyle.BooleanDecision:
	// 				return null;
	// 			case DatasetProfileFieldViewStyle.ComboBox:
	// 				return null;
	// 			case DatasetProfileFieldViewStyle.CheckBox:
	// 				return null;
	// 			case DatasetProfileFieldViewStyle.FreeText:
	// 				return null;
	// 			case DatasetProfileFieldViewStyle.RadioBox:
	// 				return null;
	// 			case DatasetProfileFieldViewStyle.DatePicker:
	// 				return null;
	// 			case DatasetProfileFieldViewStyle.InternalDmpEntities:
	// 				return null;
	// 			case DatasetProfileFieldViewStyle.ExternalDatasets:
	// 				return null;
	// 			case DatasetProfileFieldViewStyle.DataRepositories:
	// 				return null;
	// 			case DatasetProfileFieldViewStyle.Registries:
	// 				return null;
	// 			case DatasetProfileFieldViewStyle.Services:
	// 				return null;
	// 			case DatasetProfileFieldViewStyle.Tags:
	// 				return null;
	// 			case DatasetProfileFieldViewStyle.Researchers:
	// 				return null;
	// 			case DatasetProfileFieldViewStyle.Organizations:
	// 				return null;
	// 			case DatasetProfileFieldViewStyle.DatasetIdentifier:
	// 				return null;
	// 			case DatasetProfileFieldViewStyle.Currency:
	// 				return null;
	// 			case DatasetProfileFieldViewStyle.Validation:
	// 				return null;
	// 			default:
	// 				return {inputTypeNotValid: true}
	// 		}
	// 	}
	// }


	// private _atLeastOneElementListValidator(arrayToCheck): ValidatorFn{
	// 	return (control: AbstractControl): ValidationErrors | null=>{
			
	// 		const fa = control.get(arrayToCheck) as FormArray;

	// 		if(fa.length  === 0){
	// 			return {emptyArray: true};
	// 		}
	// 		return null;
	// 	}
	// }


	calculateLabelWidth(numbering: string){

		const width = numbering.split('.').reduce((acc,item)=> item+acc,'').length;


		return {'width':width+'em'}
	}
}