import { AfterViewInit, Component, Input, OnInit, ViewChild } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { MatStepper } from '@angular/material/stepper';
import { ActivatedRoute, Router } from '@angular/router';

import { takeUntil } from 'rxjs/operators';
import { Pair } from '../../../common/types/pair';
import { BaseComponent } from '../../../core/common/base/base.component';
import { CompositeField } from '../../../core/model/dataset-profile-definition/composite-field';
import { DatasetProfileDefinitionModel } from '../../../core/model/dataset-profile-definition/dataset-profile-definition';
import { Rule } from '../../../core/model/dataset-profile-definition/rule';
import { Section } from '../../../core/model/dataset-profile-definition/section';
import { DatasetDescriptionFormEditorModel } from './dataset-description-form.model';
import { FormFocusService } from './form-focus/form-focus.service';
import { VisibilityRulesService } from './visibility-rules/visibility-rules.service';

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

	// pathName: string;
	// pages: Array<number>;
	// activeStepperIndex = 1;
	// visibleSidebar = false;
	// datasetProfileDefinitionModel: DatasetDescriptionFormEditorModel;
	// private currentPageIndex = 0;
	// @ViewChild('stepper') stepper: MatStepper;

	// //@Input() dataModel: DatasetProfileDefinitionModel;
	@Input() path: string;
	@Input() form: FormGroup;
	@Input() visibilityRules: Rule[] = [];
	// id: string;
	// trackByFn = (index, item) => item ? item['id'] : null;
	// pageTrackByFn = (index, item) => item['id'];
	@Input() datasetProfileId: String;


	constructor(
		private router: Router,
		private route: ActivatedRoute,
		private visibilityRulesService: VisibilityRulesService,
		private formFocusService: FormFocusService
	) {
		super();
		//this.datasetId = route.snapshot.params['id'];
	}

	// getSubForm(subformName) {
	// 	return this.form.controls[subformName];
	// }

	ngOnInit() {

		// this.visibilityRulesService.formGroup = this.form;
		this.visibilityRulesService.buildVisibilityRules(this.visibilityRules, this.form);
		// this.datasetProfileDefinitionModel = new DatasetDescriptionFormEditorModel().fromModel(this.dataModel);
		// this.visibilityRulesService.setModel(this.datasetProfileDefinitionModel);

		// this.createPagination();

		// const sections: Pair<Section[], number>[] = this.datasetProfileDefinitionModel.pages.map(page => new Pair<Section[], number>(page.sections, page.ordinal)).filter(x => x);
		// const compositeFields: Pair<CompositeField[], number>[] = sections.map(section => new Pair<CompositeField[], number>(section.left.flatMap(sec => sec.compositeFields), section.right)).filter(x => x);
		// const nestedSections: Pair<Section[], number>[] = sections.map(section => new Pair<Section[], number>(section.left.flatMap(x => x.sections), section.right)).filter(x => x);
		// const nestedCompositeFields: Pair<CompositeField[], number>[] = nestedSections.map(section => new Pair<CompositeField[], number>(section.left.flatMap(x => x.compositeFields), section.right)).filter(x => x);
		// const compositeFieldsUnion: Pair<CompositeField[], number>[] = compositeFields.concat(nestedCompositeFields);

		//const fields = compositeFieldsUnion.flatJoinOn(x => x.right);
		//this.formFocusService.setFields(compositeFieldsUnion);
		// this.route.fragment
		// 	.pipe(takeUntil(this._destroyed))
		// 	.subscribe((fragment: string) => {
		// 		const self = this;
		// 		setTimeout(function () { self.scrollTo(fragment); });
		// 	});
	}

	ngAfterViewInit() {
		//this.visibilityRulesService.triggerVisibilityEvaluation();
		// this.route.queryParams
		// 	.pipe(takeUntil(this._destroyed))
		// 	.subscribe((params) => {
		// 		if (params && 'page' in params) {
		// 			this.changeCurrentPage(params['page']);
		// 		}
		// 	});
	}


	// toggleSidebar() {
	// 	this.visibleSidebar = !this.visibleSidebar;
	// }

	// shouldDisplaySection(section: Section): Boolean {
	// 	return (section.page) === this.currentPageIndex;
	// }

	// createPagination() {

	// }

	// changePageIndex(index: any) {
	// 	this.router.navigate([this.route.snapshot.url[0] + '/' + this.route.snapshot.url[1]], { queryParams: { page: this.pages[index - 1] } });
	// }

	// scrollTo(sectionID: string) {
	// 	if (!sectionID) { return; }
	// 	const element = document.querySelector('#' + sectionID);
	// 	if (!element) { return; }
	// 	element.scrollIntoView();
	// 	this.visibleSidebar = true;
	// }

	// changeCurrentPage(pageString: string) {
	// 	//if (!pageString) { return; }
	// 	const page = parseInt(pageString);
	// 	/*if (isNaN(page)) { return; }
	// 	const pageIndex = this.pages.indexOf(page);
	// 	if (pageIndex === -1) { return; }*/
	// 	this.stepper.selectedIndex = page;
	// }
}