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

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';
import * as test7 from './_mock/testfields.v7';
import * as test8 from './_mock/testfields.v8';
import * as test9 from './_mock/testfields.v9';
import * as test10 from './_mock/testfields.v10';
import * as test11 from './_mock/testfields.v11';
import * as test12 from './_mock/testfields.v12';
import * as test13 from './_mock/testfields.v13';
import * as test14 from './_mock/testfields.v14';

const testdata = [ test1, test2, test3, test4, test5, test6, test7, test8, test9, test10, test11, test12, test13, test14 ];

const defatltTest = 14;

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

	form: FormGroup;
	meta: StringMap<any>;

	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) || defatltTest;
		const { model, meta } = testdata[testcase - 1];

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

		/*
		console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~");

		// Test autoMeta
		const auto = this.dynaform.autoMeta(model);
		console.log(auto);

		// Test combine
		const m2 = this.dynaform.combineModelWithMeta(model, meta, true);
		console.log(m2);


		// Test building Field-Specific-Meta
		const fsm = this.dynaform.buildFieldSpecificMeta(m2);
		console.log(fsm);


		// Test building the FormGroup
		const fg = this.dynaform.buildFormGroup(fsm);
		console.log(fg);

		console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~");
		*/

		// Build the FormGroup and Modeled Metadata from the imported test data
		const dynaformdata = this.dynaform.build(model, meta, true);
		({ 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);

		// Registering callbacks
		this.dynaform.register({
			'SAYHELLO': this.sayHello,
			'SAYCHEESE': this.sayCheese
		}, this);
	}

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

	handleCallback(fnId) {
		this.dynaform.call(fnId);
	}

	sayHello() {
		alert('HELLO');
	}

	sayCheese() {
		alert('CHEESE');
	}
}