import { Component, Input, OnInit, AfterViewChecked, ViewChild, forwardRef } from '@angular/core';
import { FormGroup, Validators, ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { NgForm } from '@angular/forms';
import { Router, ActivatedRoute, ParamMap, Params } from '@angular/router';
import 'rxjs/add/operator/switchMap';

//import { FieldBase } from '../../app/form/fields/field-base';
import { FieldControlService } from '../../app/services/field-control.service';
import { ServerService } from '../../app/services/server.service';
import { dataModelBuilder } from '../../app/services/dataModelBuilder.service';
import { DataModel } from '../entities/DataModel';
import { GroupBase } from './dynamic-form-group/group-base';
import { PaginationService } from '../../app/services/pagination.service';
import { TokenService, TokenProvider } from '../services/login/token.service';
import { ModalComponent } from '../modal/modal.component';
import { AutocompleteRemoteComponent } from './fields/autocomplete-remote/autocomplete-remote.component';

import { AngularDraggableModule } from 'angular2-draggable';

import './../../assets/xml2json.min.js';
declare var X2JS: any;

var flatten = require('flat');
declare var $ :any;


import * as scroll from '../../assets/jquery.scrollTo.min.js';


import '../../assets/custom.js';
declare function simple_notifier(type: string, title: string, message:string): any;


//import '../../assets/perfect-scrollbar/perfect-scrollbar.js';
declare var PerfectScrollbar : any;

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

  @Input() dataModel: DataModel = new DataModel();
  form: FormGroup;
  payLoad = '';
  @Input() dirtyValues: number = 0;
  // pagination object
  @Input() pagination: any = {};
  finalizeStatus:boolean = false;
  id: string;
  datasetId: string;
  //datasetProperties:string; 

  private fragment: string;
  xml2jsonOBJ: any;

  expandedToc : boolean = true;


  constructor(private qcs: FieldControlService, private serverService: ServerService, private dataModelService: dataModelBuilder, private router: Router,
    private route: ActivatedRoute, private pagerService: PaginationService, private tokenService: TokenService) {
    this.form = this.qcs.toFormGroup(new Array(), new Array());
    this.xml2jsonOBJ = new X2JS();
  }

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


  ngOnInit() {

    //this.route.fragment.subscribe(fragment => { this.fragment = fragment; }); //navigate to certain section of the page, it doesn't use anymore
    let sub = this.route.params.subscribe(params => {
      this.id = params.id;
      this.datasetId = params.datasetId;
      //this.datasetProperties = params.datasetProperties
    });


    this.serverService.getDatasetByID(this.datasetId).subscribe(
      (data) => {
        var flatList;
        var formValues = "";
        if (data.properties) {
          console.log("Found already submitted form, loading that one!");

          formValues = JSON.parse(data.properties);
          flatList = flatten(formValues);
          //this.patchForm(flatList);
          if(data.status == 2) this.finalizeStatus=true;
        }

        //η κληση για το dataset profile pou htan prin pio panw anexarthth
        this.serverService.getDatasetProfileByID(this.id).subscribe(

          response => {

            console.log("response");
            console.log(response);

            const data = response;

            //replace the xmls {model,view,rule} definitions with json -- https://github.com/abdmob/x2js library
            data.definition = this.xml2jsonOBJ.xml_str2json(data.definition);
            data.ruleset.definition = this.xml2jsonOBJ.xml_str2json(data.ruleset.definition);
            data.viewstyle.definition = this.xml2jsonOBJ.xml_str2json(data.viewstyle.definition);
            //can be converted back to xml (which shouldn't be needed) with   this.xml2jsonOBJ.json2xml_str    

            console.log("this.serverService.getFields");

            console.log("data.dataset")
            console.log(data.definition)
            console.log(data.ruleset.definition)
            console.log(data.viewstyle.definition)


            this.dataModel = new DataModel();
            this.dataModel = this.dataModelService.getDataModel(data, formValues); //get formvalues and acossiate them with fields

            this.form = this.qcs.toFormGroup(this.dataModel.fields, this.dataModel.groups);

            this.form.valueChanges.subscribe(data => {
              // console.log('Form changes', data);
              let dirtyValuesArray: Array<any> = [];
              let count = 0;
              let countDirtyValues = 0;
              let percentage = 0;
              Object.keys(this.form.controls).forEach((c) => {
                //count++;
                let currentControl = this.form.controls[c];
                if (currentControl.dirty)
                  dirtyValuesArray.push(currentControl.value);

              });

              Object.keys(this.form.value).forEach((c) => {
                //count++;
                Object.keys(this.form.value[c]).forEach((item) => {
                  let value = this.form.value[c][item]
                  if (typeof(value) == "string") value.trim();
                  if(typeof(value)== "boolean") value.toString();
                  if (value != undefined && value != "") 
                    countDirtyValues++; //TODO REMOVE SPACES FROM EMPTY STRING                                      
                });


              });

              this.dataModel.groups.forEach(grp => {
                grp.groupFields.forEach((fld) => {
                  if (fld.visible == true || fld.visible == "true")
                    count++;
                  // if (fld.value != undefined && fld.value != " ")
                  //  countDirtyValues++;
                });
              });
              //console.log(count);
              // var percentage = Math.floor(dirtyValuesArray.length * 100 / count);
              percentage = Math.floor(countDirtyValues * 100 / count);
              this.dirtyValues = percentage;
            })

            //this.form = this.qcs.toFormGroup(this.fields);

            console.log("SUMMARY: ======>");
            console.log(this.dataModel);
            console.log(this.form);

            this.route.paramMap //this is how i get the projects's id

            // initialize to page 1
            this.setPage(1);

          },
          err => {
            console.log("There was an error fetching the data from server");
            console.log(err);
          }
        );
        //end- klhsh gia to dataset profiel
      },
      (err) => {

      });

      var formScroller = new PerfectScrollbar("#form-container");
      var tocScroller = new PerfectScrollbar("#toc-container");
      
  }

  scrollToElemID(elemID) {
    scroll("#" + elemID);
  }


  private patchForm(flatList: any) {

    
    for (var prop in flatList) {
      if (flatList.hasOwnProperty(prop)) {
        if (prop.endsWith('.id') || prop.endsWith('.answer') || prop.endsWith('.value')) continue;
        //console.log("updating value of "+prop +" to "+flatList[prop].valueOf())
        this.form.get(prop).setValue(flatList[prop].valueOf());
      }
    }
    //this.form.get("namingConventionGroup.nonamingConventionA213").setValue("TTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT");
  }

  ngAfterViewChecked(): void { //navigate to certain section of the page

    try {
      document.querySelector('#' + this.fragment).scrollIntoView();
    } catch (e) { }
  }

  submitForm(final){
    this.serverService.getDatasetByID(this.datasetId).subscribe(
      (data) => {
        if (final) data.status = 2;
        //is xml, so transform them to xml (it's json)
        //data.properties = this.xml2jsonOBJ.json2xml_str(JSON.stringify(this.form.value));
        data.properties = JSON.stringify(this.form.value);

        this.serverService.setDataset(data).subscribe(
          (data) => {
            console.log("Updated dataset");  
            //simple_notifier("success",null,"Saved form progress");
            this.router.navigate(['/workspace'], { queryParams: { /*returnUrl: this.state.url*/ }});     
          },
          (err) => {
            simple_notifier("danger",null,"Could not save form progress");
          });
      },
      (err) => {
        simple_notifier("danger",null,"Could not save form progress");
      });
  }

  onSubmit() {
    let final = false;
    this.submitForm(false);

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

  SaveFinalize(){
    $("#confirmModal").modal("hide");
    let final = true;
    this.submitForm(final);
  }

  shouldIShow(element) { //pagination , pages are declared in xml for every groupfield
    
    if (this.pagination.currentPage == element.page){
      return true;
    }
  else 
     return false;

   }

  setPage(page: number) {

    if (page < 1 || page > this.pagination.totalPages) {
      return;
    }
    var pagesize = 4;
    // get pagination object from service
    this.pagination = this.pagerService.getPagination(this.dataModel.groups, this.dataModel.groups.length, page, pagesize);

    //get current page of items
    // this.dataModel.sections.forEach(section => {
    //   if (section.groupFields.length > 0) {
    //     section.groupFields = this.dataModel.groups.slice(this.pagination.startIndex, this.pagination.endIndex + 1);
    //   }
    // });
    //this.dataModel.groups = this.dataModel.groups.slice(this.pagination.startIndex, this.pagination.endIndex + 1);
  }

  signOut2() {
    var auth2 = gapi.auth2.getAuthInstance();
    auth2.signOut().then(function () {
      console.log('User signed out.');
      localStorage.removeItem('currentUser');
    });
    this.tokenService.setToken(null); //kanonika prepei na mpei mesa sthn function.....
  }

  toggleTOC(){
    console.log("toggling toc")
    this.expandedToc = !this.expandedToc;
  }

}