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, SecondaryConnectionServiceProxy } 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 { ajaxSetup } from '@devexpress/analytics-core/analytics-utils'  


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

  tenants: any;
  onLoadLength: any;
  onSubmitLength: any;

  constructor(
            injector: Injector,
            private _appSessionService: AppSessionService,
            private router: Router,
            private _location:Location,
            private route: ActivatedRoute,
            private _reportServiceProxy: ReportServiceProxy,
            private _notifyService: NotifyService,
            private _secondaryConnectionServiceProxy: SecondaryConnectionServiceProxy,
        ) {
            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();
        }
    });*/
  }

  reloadCurrentRoute() {
  /*  let currentUrl = this.router.url;
    this.router.navigateByUrl('/', {skipLocationChange: true}).then(() => {
        this.router.navigate([currentUrl]);
    });*/
    this.viewer.bindingSender.OpenReport(this.reportUrl);  
  }
  connectToTenant(id) : void {
      this._secondaryConnectionServiceProxy.connectToTenant(id)
                        .subscribe(() => {
                        this.reloadCurrentRoute();
                            
      });
  }

  ngOnInit() {

              this.spinnerService.show();

              if(this.tenantId == null) {
                this._reportServiceProxy.getTenants(
                ).subscribe(result => {
                     this.tenants = result;

                });
              }

              

              this.route.paramMap.subscribe(params => {
                      this.name = params.get("name")
              });
              
              
              ajaxSetup.ajaxSettings = { headers: { 'Access-Control-Allow-Origin': '*', 'Authorization': 'Bearer ' + this.token } }; 
              //Report.Reporting.Viewer.Settings.AsyncExportApproach = true;  
              
              //this.reportUrl = this.name + "/" + this.tenantId + "/" +this.user.id;

              this.reportUrl = this.name;
   
  
              
    
  
  }

  onCustomizeParameterLookUpSource(pEvent: any) {               
    if (pEvent.args.parameter.name === "Customer" || pEvent.args.parameter.name === "Customer") {
      this.onLoadLength = pEvent.args.items.length;
    }
     
  }

  /*CustomizeParameterEditors(event) {
      let e = event.args;
      if (e.parameter.multiValue) {
          if(e.parameter.name == 'Customer' || e.parameter.name == 'Customers') {*/
                /*var ph = document.getElementsByClassName("dx-placeholder");
                console.log(ph);
                //ph[0].className = "new-place";
                console.log(ph.length);
                if(ph) {
                   for (var x = 0; x < ph.length; x++) {
                          console.log(1);
                          ph[x].setAttribute("data-dx_placeholder", "ulol");
                   }
                }*/

                /*e.info.editor = $.extend({}, e.info.editor);
                e.info.editor.extendedOptions = $.extend(e.info.editor.extendedOptions || {}, {

                    onOpened: (args) => {  
                      //console.log(args);
                      var tags = args.component.content().getElementsByClassName('dx-list-select-all');
                      if (tags) {
                         for (var x = 0; x < tags.length; x++) {
                           tags[x].style.display = "none";
                         }
                       }

                      args.component._popup.repaint();
                      //console.log(args.component.content());
                    }
                });*/
/*          }

      
      }
  }*/

  //OnParametersInitialized(event) {
        // Update a string parameter value when a user changes the Boolean parameter value.
        //console.log(event.args.ActualParametersInfo);

  //}

  submitParameter(event) {
    var checkParamName = event.args.Parameters.filter(function (p) { return p.Key == "Customer" || p.Key == "Customers"; })[0].Key;
    if(checkParamName) {
      this.onSubmitLength = event.args.Parameters.filter(function (p) { return p.Key == "Customer" || p.Key == "Customers" })[0].Value.length;
      if(this.onSubmitLength == this.onLoadLength) {
          event.args.Parameters.filter(function (p) { return p.Key == "Customer" || p.Key == "Customers"; })[0].Value = "";
      }    
    }


    
  }


  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)
  //       ]
  //   })
  // }

}