import { AfterViewInit, Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
import { UntypedFormGroup } from '@angular/forms';
import { MatExpansionPanel } from '@angular/material/expansion';
import { DescriptionTemplate } from '@app/core/model/description-template/description-template';
import { BaseComponent } from '@common/base/base.component';
import { ValidationErrorModel } from '@common/forms/validation/error-model/validation-error-model';
import { Guid } from '@common/types/guid';
import { LinkToScroll } from '../table-of-contents/table-of-contents.component';
import { DescriptionFormAnnotationService } from './description-form-annotation.service';
import { VisibilityRulesService } from './visibility-rules/visibility-rules.service';

@Component({
	selector: 'app-description-form',
	templateUrl: './description-form.component.html',
	styleUrls: ['./description-form.component.scss']
})
export class DescriptionFormComponent extends BaseComponent implements OnInit, AfterViewInit, OnChanges {

	@Input() propertiesFormGroup: UntypedFormGroup;
	@Input() descriptionTemplate: DescriptionTemplate;
	@Input() visibilityRulesService: VisibilityRulesService;
	@Input() descriptionId: Guid;



	// @ViewChild('stepper', { static: false }) stepper: MatStepper;
	@Input() path: string;
	@Input() datasetDescription: String;
	@Input() linkToScroll: LinkToScroll;
	@Output() formChanged: EventEmitter<any> = new EventEmitter();
	@Output() fieldsetFocusChange: EventEmitter<string> = new EventEmitter<string>();

	// tocentries: ToCEntry[];


	@Input() TOCENTRY_ID_PREFIX = "";
	@Input() validationErrorModel: ValidationErrorModel;

	// public hiddenEntriesIds: string[] = [];

	constructor(
		public descriptionFormAnnotationService: DescriptionFormAnnotationService,
	) {
		super();

	}

	ngOnInit() {
		this.init();
	}

	ngOnChanges(changes: SimpleChanges) {
		this.init();
		// When the form is changed set stepper index to 0.
		// if (this.stepper && changes['form'] && !changes['form'].isFirstChange()) {
		// 	this.stepper.selectedIndex = 0;
		// } else if (this.stepper && changes['linkToScroll'] && changes['linkToScroll'].currentValue) {
		// 	if (changes['linkToScroll'].currentValue.page >= 0) {
		// 		this.stepper.selectedIndex = changes['linkToScroll'].currentValue.page;
		// 	}
		// }


		if (this.descriptionId != null) {
			this.descriptionFormAnnotationService.init(this.descriptionId);
		}
	}

	ngAfterViewInit() {

	}

	init() {

		// this.tocentries = this.getTocEntries();
		// const rules_to_append = this._enrichWithMultiplicityRules(this.tocentries);

		// this.visibilityRulesService.buildVisibilityRules([...this.visibilityRules, ...rules_to_append], this.form);

		// if (this.form) {
		// 	this.form.valueChanges
		// 		.pipe(takeUntil(this._destroyed))
		// 		.subscribe(val => {
		// 			this.formChanged.emit(val);
		// 		});
		// }
		// this.visibilityRulesInstance.emit(this.visibilityRulesService);




		// this.hiddenEntriesIds = this._findHiddenEntries(this.tocentries);

		// this.visibilityRulesService.visibilityChange
		// 	.pipe(
		// 		takeUntil(this._destroyed),
		// 		debounceTime(100)
		// 	)
		// 	.subscribe(_ => {
		// 		this.hiddenEntriesIds = this._findHiddenEntries(this.tocentries);
		// 	})
	}

	onAskedToScroll(panel: MatExpansionPanel, id?: string) {
		// panel.open();
		// this.fieldsetFocusChange.emit(id);
	}

}