import { Section } from '../../models/Section';
import { JsonSerializer } from '../../utilities/JsonSerializer';
import { Rule } from '../../models/Rule';
import { DatasetWizardService } from '../../services/dataset-wizard/dataset-wizard.service';
import { BaseHttpService } from '../../utilities/cite-http-service-module/base-http.service';
import { VisibilityRulesService } from '../../utilities/visibility-rules/visibility-rules.service';
import { DatasetProfileDefinitionModel } from '../../models/DatasetProfileDefinitionModel';
import { DatasetWizardModel } from '../../models/datasets/DatasetWizardModel';
import { Component, Input, OnInit, ViewEncapsulation, AfterViewInit } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';
import 'rxjs/add/operator/switchMap';
import { Location } from '@angular/common';

@Component({
	selector: 'app-dynamic-form',
	templateUrl: './dynamic-form.component.html',
	styleUrls: [
		'./dynamic-form.component.scss'
	],
	providers: [
	],
	encapsulation: ViewEncapsulation.None,
})
export class DynamicFormComponent implements OnInit, AfterViewInit {

	pathName: string;
	pages: Array<number>;
	activeStepperIndex = 1;
	visibleSidebar = false;
	datasetProfileDefinitionModel: DatasetProfileDefinitionModel;
	private progressbar = false;
	private currentPageIndex = 0;

	@Input() dataModel: DatasetWizardModel = new DatasetWizardModel();
	@Input() path: string;
	@Input() form: FormGroup;
	id: string;
	trackByFn = (index, item) => item ? item['id'] : null;
	pageTrackByFn = (index, item) => item['id'];

	// @Input() datasetId: string;

	constructor(
		private router: Router,
		private _location: Location,
		private route: ActivatedRoute,
		private visibilityRulesService: VisibilityRulesService,
		private http: BaseHttpService,
		private datasetWizardService: DatasetWizardService,
	) {
		//this.datasetId = route.snapshot.params['id'];
	}

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


	ngOnInit() {

		const rules: Rule[] = JsonSerializer.fromJSONArray(this.dataModel.datasetProfileDefinition.rules, Rule);
		this.visibilityRulesService.formGroup = this.form;
		this.visibilityRulesService.buildVisibilityRules(rules);
		this.datasetProfileDefinitionModel = this.dataModel.datasetProfileDefinition;
		this.visibilityRulesService.setModel(this.datasetProfileDefinitionModel);
		this.createPagination();
		this.progressbar = true;

		this.route.fragment.subscribe((fragment: string) => {
			const self = this;
			setTimeout(function () { self.scrollTo(fragment); });
		});

		this.route.queryParams.subscribe((params) => {
			if (params && 'page' in params) {
				this.changeCurrentPage(params['page']);
			}
		});
	}

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


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

	// getPages(model: DatasetProfileDefinitionModel): Array<number> {
	//   let pageSet = new Set<number>();

	//   model.sections.forEach(section => {
	//     pageSet.add(section.page);
	//   });

	//   return Array.from(pageSet).sort((a, b) => a - b);
	// }

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

	createPagination() {
		/*this.pages.forEach(item => {
		   this.stepperItems.push({
			 label: '',
		   })
		});*/
	}

	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;
		const scrollElement = document.querySelector('.scrollableContent');
		//scrollElement.scrollTop = topElement.offsetTop;
	}

	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.currentPageIndex = page;
	}
}