import { PaginationService } from './pagination/pagination-service';
import { VisibilityRulesService } from '../visibility-rules/visibility-rules.service';
import { TestModel } from '../testModel/testmodel';
import { DatasetModel } from '../models/DatasetModel';
import { Rule } from '../models/Rule';

import { JsonSerializer } from '../utilities/JsonSerializer';
import { Component, Input, OnInit, AfterViewChecked, ViewChild, forwardRef, ViewEncapsulation } 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 { TokenService, TokenProvider } from '../services/login/token.service';
import { ModalComponent } from '../modal/modal.component';

import { Location } from '@angular/common';

import { AngularDraggableModule } from 'angular2-draggable';

import { MenuItem } from 'primeng/primeng';

import { PDFService } from '../services/transformers/pdf.service';

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'
  ],
  providers: [
    FieldControlService, ServerService
  ],
  encapsulation: ViewEncapsulation.None,
})
export class DynamicFormComponent implements OnInit {

  @Input() dataModel: DatasetModel = new DatasetModel();
  @Input() path: string;
  form: FormGroup;
  id: string;
  datasetId: string;
  pathName: string;
  pages: Set<number>;
  stepperItems: MenuItem[] = new Array<MenuItem>();
  activeStepperIndex: number = 1;
  visibleSidebar: boolean = false;

  private progressbar: boolean = false;

  private fragment: string;
  constructor(private serverService: ServerService, private router: Router, private pdfService: PDFService,
    private _location: Location, private route: ActivatedRoute, private tokenService: TokenService
    , private visibilityRulesService: VisibilityRulesService
    , private paginationService:PaginationService
  ) {
    this.datasetId = route.snapshot.params['id'];
  }

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


  ngOnInit() {

    this.serverService.getDmp(this.datasetId).subscribe(
      response => {
        this.dataModel = new JsonSerializer<DatasetModel>().fromJSONObject(response, DatasetModel);
        this.pages = this.getPages(this.dataModel);
        this.createPagination();
        this.form = this.dataModel.buildForm();
        this.visibilityRulesService.formGroup = this.form;
        let rules: Rule[] = new JsonSerializer<Rule>().fromJSONArray(response.rules, Rule);
        this.visibilityRulesService.buildVisibilityRules(rules)
        this.progressbar = true;
      },
      error => {
        console.log("Could not load dmp");
      }
    )

    /* else{
      
      this.addSection();
    }
    this.dataModel = new JsonSerializer<DatasetModel>().fromJSONObject(TestModel,DatasetModel);
    this.form = this.dataModel.buildForm();
    this.visibilityRulesService.formGroup = this.form;
    let rules:Rule[] = new JsonSerializer<Rule>().fromJSONArray(TestModel.rules,Rule);
    this.visibilityRulesService.buildVisibilityRules(rules)  */
  }

  submit() {
    this.serverService.updateDataset(this.datasetId, this.form.value).subscribe()
  }

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

  getPages(model: DatasetModel): Set<number> {
    let pageSet = new Set<number>();
    model.sections.forEach(section => {
      pageSet.add(section.page);
    })
    return pageSet;
  }

  createPagination() {
    this.pages.forEach(item => {
      this.stepperItems.push({
        label: '',
        command: (event: any) => {
          this.paginationService.setCurrentIndex(event.index)          
        }
      })
    })
  }
  /* 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());
      }
    }
    
  }

  ngAfterViewChecked(): void { //navigate to certain section of the page
    try {
      document.querySelector('#' + this.fragment).scrollIntoView();
    } catch (e) { }
  }

  

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

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

  SaveFinalizeForm(){
    $("#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);
  }


  toggleTOC(){
    this.expandedToc = !this.expandedToc;
  }
 */

  createPDF(elementID: string, pdffilename: string) {
    this.pdfService.toPDF(elementID, pdffilename);
  }


}