import { Component, Input, OnInit, AfterViewChecked, ViewChild } from '@angular/core';
import { FormGroup, Validators } from '@angular/forms';
import { NgForm } from '@angular/forms';

//import { FieldBase } from '../../app/form/fields/field-base';
import { FieldControlService } from '../../app/services/field-control.service';
import { ServerService } from '../../app/services/server.service';
import { FieldVisibility } from '../../app/services/fieldVisibility.service';
import { dataModelBuilder } from '../../app/services/dataModelBuilder.service';
import { DataModel } from '../entities/DataModel';
import { GroupBase } from './dynamic-form-group/group-base';

@Component({
  selector: 'dynamic-form',
  templateUrl: './dynamic-form.component.html',
  providers: [FieldControlService, ServerService, FieldVisibility, dataModelBuilder]
})
export class DynamicFormComponent implements OnInit {

  @Input() dataModel: DataModel = new DataModel();
  form: FormGroup;
  
  payLoad = '';

  
  
  
  constructor(private qcs: FieldControlService, private serverService: ServerService, private fieldVisibility: FieldVisibility, private dataModelService: dataModelBuilder) {
    this.form = this.qcs.toFormGroup(new Array(), new Array());

  }

  
    getSubForm(subformName){
      return this.form.controls[subformName];
    }
  
  
  ngOnInit() {
    /*
    //this.form = this.qcs.toFormGroup(this.fields);
    this.serverService.getHTTPFields()
      .subscribe(
      (data: any[]) => {
        this.fields = this.fieldVisibility.getFieldVisibility(data);
        this.form = this.qcs.toFormGroup(this.fields);
        console.log(this.fields);
      },
      (error) => console.log(error)
      );
    //this.buildForm();
    */
    
    console.log("DynamicFormComponent.ngOnInit() -- RUNNIGN");
    
    
    this.serverService.getData()
      .subscribe(
      (data: any[]) => {
        
        console.log("this.serverService.getFields");
        
        this.dataModel = new DataModel();
        this.dataModel = this.dataModelService.getDataModel(data);
        
        this.form = this.qcs.toFormGroup(this.dataModel.fields, this.dataModel.groups);
        //this.form = this.qcs.toFormGroup(this.fields);
        
        console.log("SUMMARY: ======>");
        console.log(this.dataModel);
        console.log(this.form);
        
      },
      (error) => console.log(error)
      );
    /*
    
    this.serverService.getFields()
      .subscribe(
      (data: any[]) => {
        
        console.log("this.serverService.getFields");
        
        this.dataModel = new DataModel();
        this.dataModel = this.fieldVisibility.getDataModel(data);
        
        this.form = this.qcs.toFormGroupAlt(this.dataModel.fields, this.dataModel.groups);
        //this.form = this.qcs.toFormGroup(this.fields);
        
        console.log("SUMMARY: ======>");
        console.log(this.dataModel);
        console.log(this.form);
        
      },
      (error) => console.log(error)
      );
    
    */
    
  }

  onSubmit() {
    this.payLoad = JSON.stringify(this.form.value);
  }

  buildForm(): void {
    //this.form = this.qcs.toFormGroup(this.fields.     


    this.form.valueChanges
      .subscribe(data => this.onValueChanged(data));

    this.onValueChanged(); // (re)set validation messages now
  }

  onValueChanged(data?: any) {
    if (!this.form) { return; }
    const form = this.form;

    for (const field in this.formErrors) {
      // clear previous error message (if any)
      this.formErrors[field] = '';
      const control = form.get(field);

      if (control && control.dirty && !control.valid) {
        const messages = this.validationMessages[field];
        for (const key in control.errors) {
          this.formErrors[field] += messages[key] + ' ';
        }
      }
    }
  }

  formErrors = {
    'name': '',
    'power': ''
  };

  validationMessages = {
    'name': {
      'required': 'Name is required.',
      'minlength': 'Name must be at least 4 characters long.',
      'maxlength': 'Name cannot be more than 24 characters long.',
      'forbiddenName': 'Someone named "Bob" cannot be a hero.'
    },
    'power': {
      'required': 'Power is required.'
    }
  };
}