import { Component, Injector, ViewChild, ViewEncapsulation, Input, Output, 
EventEmitter, OnInit, AfterViewInit } from '@angular/core';
import { AppComponentBase } from '@shared/common/app-component-base';
import { TokenAuthServiceProxy } from '@shared/service-proxies/service-proxies';
import 'devexpress-reporting/dx-richedit';
import { AppSessionService } from '@shared/common/session/app-session.service';
import { AppConsts } from '@shared/AppConsts';
import { ActivatedRoute, Router } from '@angular/router';
import {Location} from '@angular/common';
import { appModuleAnimation } from '@shared/animations/routerTransition';

import { ReportServiceProxy } from '@shared/service-proxies/service-proxies';
import { NotifyService } from '@abp/notify/notify.service';
import DevExpress from '@devexpress/analytics-core';  
import Report from "devexpress-reporting/dx-webdocumentviewer";
// import { DxDataGridComponent } from "devextreme-angular";
import { DxReportViewerComponent } from 'devexpress-reporting-angular';
import DataSource from "devextreme/data/data_source";
import { DxReportDesignerComponent} from 'devexpress-reporting-angular';
import { finalize } from 'rxjs/operators';
//import { DxDataGridComponent } from "devextreme-angular/ui/nested";  
declare var KTWizard: any;
declare var $: any;
declare var KTApp: any;
declare let swal: any;
@Component({
  selector: 'report-basic.component',
  encapsulation: ViewEncapsulation.None,
  templateUrl: './report-basic.component.html',
  animations: [appModuleAnimation()],
  styleUrls: [
    "../../../../node_modules/jquery-ui/themes/base/all.css",
    "../../../../node_modules/devextreme/dist/css/dx.common.css",
    "../../../../node_modules/devextreme/dist/css/dx.light.css",
    "../../../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css",
    "../../../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css",
    "../../../../node_modules/@devexpress/analytics-core/dist/css/dx-querybuilder.css",
    "../../../../node_modules/devexpress-reporting/dist/css/dx-webdocumentviewer.css",
    "../../../../node_modules/devexpress-reporting/dist/css/dx-reportdesigner.css",
    "./report-designer.component.less"

  ]
  
})

export class ReportBasicComponent extends AppComponentBase {
  getDesignerModelAction = "api/ReportDesignerClient/GetReportDesignerModel";
  //@ViewChild(DxDataGridComponent) dataGrid: DxDataGridComponent;
  @ViewChild(DxReportDesignerComponent, { static: false }) designer: DxReportDesignerComponent;
  dataSource: DataSource;
  tenant = this._appSessionService.tenant;
  user = this._appSessionService.user;

  tenantId = this.tenant != undefined ? this.tenant.id : null;
  //Wizard: DevExpress.Designer.Wizard.WizardType
  reportUrl: any;
  
  loadReport: boolean = false;
  checkAll: boolean = false;
  name: any;
  saving = false;
  hostUrl = AppConsts.remoteServiceBaseUrl + '/';
  token = abp.auth.getToken(); 
  ds: any = {};
  queries: any;
  prevButton: any;
  nextButton: any;
  wizard: any;
  dataField: any;
  qspinner: boolean = true;
  dspinner: boolean = true;
  queryName: any;
  reportName: any;
  dataFields: any;
  radioSelected:any;

  //reportUrl: string = "XtraReport";
  //invokeAction: string = 'CustomDocumentViewerController/Invoke';
  //invokeAction: string = 'DXXRDV';
  //hostUrl: string = "http://localhost:65302/";
  selectedQuery: any;
  constructor(
            injector: Injector,
            private _appSessionService: AppSessionService,
            private router: Router,
            private _location: Location,
            private route: ActivatedRoute,
            private _reportServiceProxy: ReportServiceProxy,
            private _notifyService: NotifyService,
            private _tokenAuth: TokenAuthServiceProxy,
            private _router: Router
        ) {
            super(injector);
            
            
            
  }

/*  getDataSource () {
        this.ds = this.dataGrid.instance.getDataSource();
        console.log(this.ds);
  }
*/
  
  insertSpaces(string) {
    string = string.replace(/([a-z])([A-Z])/g, '$1 $2');
    string = string.replace(/([A-Z])([A-Z][a-z])/g, '$1 $2')
    return string;
  }

  selectAll() {
    
    for (var i = 0; i < this.dataField.length; i++) {
      this.dataField[i].Selected = this.checkAll;
      
    }
  }
  
  checkAllIsSelected() {
    var count = 0;
    for (var i = 0; i < this.dataField.length; i++) {
        
        if(this.dataField[i].Selected == true) {
           
              count ++;
            
        }
      
    }
    
    if(count == this.dataField.length) {
      this.checkAll = true;
    }
    else {
      this.checkAll = false;
    }
  }

  onItemChange(item){
      this.radioSelected = item;
  }

  ngOnInit() {

                                    this._reportServiceProxy.getReportDataSource(
                                        
                                    ).subscribe(result => {
                                        if(result) {
                                          this.qspinner = false;
                                        }

                                        this.queries = result;
                                        
                                        var wizardEl = document.querySelector('#kt_wizard_v2');
                                        var that = this;
                                        var wizard = new KTWizard(wizardEl, {
                                         startStep: 1, // Initial active step number
                                         clickableSteps: false,
                                         navigation: false  // Allow step clicking
                                        });

                                        $(document).keypress(function(e) {

                                              if(e.which == 13) {
                                                      event.preventDefault();
                                                      return false;

                                              }
                                        });

                                        this.prevButton = wizardEl.querySelector('[data-ktwizard-type="action-prev"]');
                                        this.nextButton = wizardEl.querySelector('[data-ktwizard-type="action-next"]');

                                       
                                          /* this.prevButton.addEventListener('click', function() {
                                            // Go back to the previouse step
                                               wizard.goPrev();
                                            });​ */
                                        
                                           this.prevButton.addEventListener('click', function() {
                                                var step = wizard.getStep();

                                                if(step == 1) {
                                                  that.dataField = null;
                                                  that.dspinner = true;
                                                  that.checkAll = false
                                                }
                                                

                                           });

                                        
                                           this.nextButton.addEventListener('click', function() {
                                            
                                              var val = that.radioSelected;
                                              
                                              var step = wizard.getStep();
                                              if(step == 2) {

                                                   
                                                   
                                                   if(val != undefined) {
                                                       
                                                     
                                                     
                                                     that.queryName = val.name;
                                                       that._reportServiceProxy.getDataField(val.name).subscribe(data => {
                                                          if(!data) {
                                                              wizard.goTo(1);
                                                          }
                                                          else {
                                                             that.dspinner = false;
                                                             that.dataField = data;
                                                          }
                                                         
                                                    });
                                                     
                                                     
                                                   }
                                                   else {
                                                      that.message.warn('Please Select A Query');
                                                      wizard.goTo(1);
                                                   }


                                              }

                                              if(step == 3) {
                                                var df = that.dataField.filter(x => x.Selected == true);

                                                if(df != undefined) {

                                                    if(df.length > 0) {
                                                        that.dataFields = df;

                                                    }
                                                    else {
                                                      that.message.warn('Please Select A Data Field');
                                                      wizard.goTo(2);
                                                    }
                                                }

                                              }
                                            });​ 
                                       

                                    });




           


  
  }


  save() : void {
     var arr = new Array();
    
     for (var i in this.dataFields) {
        arr.push(this.dataFields[i].name);
     }
     
     if(this.reportName == undefined) {
        this.message.warn('Report name is required');
     }
     else {

        this.message.confirm(
             'Are you sure?',
             'Load and Create Report',
             (isConfirmed) => {
                 if (isConfirmed) {
                     this.spinnerService.show();
                             
                     this._reportServiceProxy.setNewData(this.reportName, this.queryName, arr)
                     .pipe(finalize(() => { this.saving = false;}))
                     .subscribe(result => {
                             

                             if(result) {
                               var reportId = result.toString();
                               //this.spinnerService.hide();
                               this.redirectUrl('/app/main/report-viewer', reportId);
                               
                             }
                             
                     },error=> {
                                   this.saving = false
                     });
                 }
             }
            
         );
     }


     
      
  }

  redirectUrl(url: any, name?: string){
      if(name != null){
          var myurl = `${url}/${name}`;
      }else{
          var myurl = `${url}`;
      }
      console.log(myurl);
      this._router.navigateByUrl(myurl);
  }

  goBack(){
        this._location.back();
  }

}