import { Component, OnInit, OnChanges, ViewChild, TemplateRef } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { DynaformService } from './dynaform/services/dynaform.service';

import * as test1 from './_mock/testfields.v1';
import * as test2 from './_mock/testfields.v2';
import * as test3 from './_mock/testfields.v3';
import * as test4 from './_mock/testfields.v4';
import * as test5 from './_mock/testfields.v5';
import * as test6 from './_mock/testfields.v6';

const testdata = [ test1, test2, test3, test4, test5, test6 ];

@Component({
	selector: 'app-root',
	templateUrl: './app.component.html',
	styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, OnChanges {

	form: FormGroup;
	meta: StringMap;

	hCssRed = 'color: white; background-color: maroon; font-weight: bold;';
	hCssGreen = 'color: white; background-color: green; font-weight: bold;';

	@ViewChild('testTemplate', { read: TemplateRef })
	tref: TemplateRef<any>;

	constructor(
		private dynaform: DynaformService
	) {
	}

	ngOnInit() {

		// Optionally supply the test to run in the query string e.g. ?test=3
		const testcase = parseInt(new URLSearchParams(document.location.search).get('test'), 10) || 2;
		const { model, meta } = testdata[testcase - 1];

		console.log('%c *** TEST DATA *** ', this.hCssRed);
		console.log('Model', model);
		console.log('Meta', meta);

		// Build the FormGroup and Modeled Metadata from the imported test data
		const dynaformdata = this.dynaform.build(model, meta);
		({ form: this.form, meta: this.meta } = dynaformdata);

		console.log('%c *** Modeled MetaData *** ', this.hCssGreen);
		console.dir(this.meta);
		console.log('%c *** FormGroup *** ', this.hCssGreen);
		console.dir(this.form);
	}

	ngOnChanges() {
		console.log(this.form.errors);
	}
}