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 { DxReportViewerComponent } from 'devexpress-reporting-angular';
// import { predefinedDateRanges } from 'devexpress-reporting/scopes/reporting-viewer-widgets';

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";  

@Component({
  selector: 'report-viewer.component',
  encapsulation: ViewEncapsulation.None,
  templateUrl: './report-viewer.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"


  ]
})

export class ReportViewerComponent extends AppComponentBase implements OnInit {
  //getDesignerModelAction = "api/ReportDesignerClient/GetReportDesignerModel";
   @ViewChild(DxReportViewerComponent, { static: false }) viewer: DxReportViewerComponent;
  tenant = this._appSessionService.tenant;
  user = this._appSessionService.user;

  tenantId = this.tenant != undefined ? this.tenant.id : null;

  reportUrl: string;
  
  loadReport: boolean = false;
  name: any;

  hostUrl = AppConsts.remoteServiceBaseUrl + '/';
  token = abp.auth.getToken();  
  //reportUrl: string = "XtraReport";
  //invokeAction: string = 'CustomDocumentViewerController/Invoke';
  invokeAction: string = 'DXXRDV';
  //hostUrl: string = "http://localhost:65302/";

  constructor(
            injector: Injector,
            private _appSessionService: AppSessionService,
            private router: Router,
            private _location:Location,
            private route: ActivatedRoute,
            private _reportServiceProxy: ReportServiceProxy,
            private _notifyService: NotifyService
        ) {
            super(injector);
            
  }

  BeforeRender(event) {
    //...
    if(event) {
      this.spinnerService.hide();
    }

    /*event.args.reportPreview.zoom(0.25);
    event.args.reportPreview.showMultipagePreview(true);
    alert ("Page load starts...");*/
    //Get a property that contains the document's page information. 
    //var pages = event.args.reportPreview.pages;
    //Subscribe to property change. 
    /*var pagesSubscription = pages.subscribe(function (newValue) {
        if (newValue.length > 0) {
            alert ("First page is loaded.");
            //Stop tracking changes.
            pagesSubscription.dispose();
        }
    });*/
  }

  ngOnInit() {

              this.spinnerService.show();


    

              this.route.paramMap.subscribe(params => {
                      this.name = params.get("name")
              });
              
              
              DevExpress.Analytics.Utils.ajaxSetup.ajaxSettings = { headers: { 'Authorization': 'Bearer ' + this.token } };  
              //Report.Reporting.Viewer.Settings.AsyncExportApproach = true;  
              
              //this.reportUrl = this.name + "/" + this.tenantId + "/" +this.user.id;

              this.reportUrl = this.name;
   
  
    
    
  
  }

  goBack(){
  // if(this.viewer.bindingSender.Close(this.reportUrl)){
    //   this._location.back(); 
    // }
    // else{
    //   console.log("ERROR")
    // }
    var that = this
    this.viewer.bindingSender.Close(this.reportUrl);
    // this._location.back(); 
        setTimeout(function(){ 
          
          that._location.back(); 
        }, 1500);


  }

  ngOnDestroy() {
    //this.viewer.bindingSender.Close(this.reportUrl);
  }

  // CustomizePredefinedRanges(event) {
  //   predefinedDateRanges.splice(0,
  //       predefinedDateRanges.length);

  //   predefinedDateRanges.push({
  //       displayName: 'September',
  //       range: () => [
  //           new Date(2019, 8, 1),
  //           new Date(2019, 8, 30)
  //       ]
  //   })
  //   predefinedDateRanges.push({
  //       displayName: 'October',
  //       range: () => [
  //           new Date(2019, 9, 1),
  //           new Date(2019, 9, 31)
  //       ]
  //   })
  // }

}