import { Component, Input, OnChanges, OnInit } from '@angular/core';
import { 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 } 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';

@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']
})
export class DatasetProfileEditorCompositeFieldComponent implements OnInit, OnChanges {

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

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



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

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

	viewTypeEnum =  ViewStyleType;

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

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

	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;

	}


	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);

	}

	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 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());
				break;
			case this.viewTypeEnum.CheckBox:
				fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.CheckBox)
				fieldForm.addControl('data', new CheckBoxFieldDataEditorModel().buildForm());
				break;
			case this.viewTypeEnum.Select:
				fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.ComboBox)
				fieldForm.addControl('data', new WordListFieldDataEditorModel().buildForm());
				break;
			case this.viewTypeEnum.Other:
				fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.ComboBox)
				fieldForm.addControl('data', new AutoCompleteFieldDataEditorModel().buildForm()); //TODO SEE
				break;
			case this.viewTypeEnum.InternalDmpEntities:
				fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.InternalDmpEntities)
				fieldForm.addControl('data', new ResearchersAutoCompleteFieldDataEditorModel().buildForm());//TODO TO SEE
				break;
			case this.viewTypeEnum.FreeText:
				fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.FreeText)
				fieldForm.addControl('data', new FreeTextFieldDataEditorModel().buildForm());
				break;
			case this.viewTypeEnum.RadioBox:
				fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.RadioBox)
				fieldForm.addControl('data', new RadioBoxFieldDataEditorModel().buildForm());
				break;
			case this.viewTypeEnum.TextArea:
				fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.TextArea)
				fieldForm.addControl('data', new TextAreaFieldDataEditorModel().buildForm());
				break;
			case this.viewTypeEnum.DatePicker:
				fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.DatePicker)
				fieldForm.addControl('data', new DatePickerDataEditorModel().buildForm());
				break;
			case this.viewTypeEnum.ExternalDatasets:
				fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.ExternalDatasets)
				fieldForm.addControl('data', new ExternalDatasetsDataEditorModel().buildForm());
				break;
			case this.viewTypeEnum.DataRepositories:
				fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.DataRepositories)
				fieldForm.addControl('data', new DataRepositoriesDataEditorModel().buildForm());
				break;
			case this.viewTypeEnum.Registries:
				fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Registries)
				fieldForm.addControl('data', new RegistriesDataEditorModel().buildForm());
				break;
			case this.viewTypeEnum.Services:
				fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Services)
				fieldForm.addControl('data', new ServicesDataEditorModel().buildForm());
				break;
			case this.viewTypeEnum.Tags:
				fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Tags)
				fieldForm.addControl('data', new TagsDataEditorModel().buildForm());
				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());
				break;
			case this.viewTypeEnum.Organizations:
				fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Organizations)
				// this.form.addControl('data', new OrganizationsDataEditorModel().buildForm());
				fieldForm.addControl('data', new DatasetsAutoCompleteFieldDataEditorModel().buildForm());
				break;
			case this.viewTypeEnum.DatasetIdentifier:
				fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.DatasetIdentifier)
				fieldForm.addControl('data', new DatasetIdentifierDataEditorModel().buildForm());
				break;
			case this.viewTypeEnum.Currency:
				fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Currency)
				fieldForm.addControl('data', new CurrencyDataEditorModel().buildForm());
				break;
			case this.viewTypeEnum.Validation:
				fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Validation)
				fieldForm.addControl('data', new ValidationDataEditorModel().buildForm());
				break;
		}

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

	}

	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}
			}
		}
	}

}