import { Component, AfterViewInit, ElementRef, OnDestroy } from '@angular/core';
import { Injector, ViewChild, ViewEncapsulation, Input, Output, EventEmitter, OnInit } from '@angular/core';
import { AppComponentBase } from '@shared/common/app-component-base';
import { DashboardServiceProxy } from '@shared/service-proxies/service-proxies';
import { TokenAuthServiceProxy } from '@shared/service-proxies/service-proxies';
import { DashboardControl, ResourceManager, DashboardPanelExtension } from 'devexpress-dashboard';
import { appModuleAnimation } from '@shared/animations/routerTransition';
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';

@Component({
  selector: 'view-dashboard',
  encapsulation: ViewEncapsulation.None,
  templateUrl: './view-dashboard.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-dashboard/dist/css/dx-dashboard.light.css",
    "./dashboard.component.less"


  ]
})

export class ViewDashboardComponent extends AppComponentBase {
  private dashboardControl!: DashboardControl;
  /*constructor(private element: ElementRef) {
    ResourceManager.embedBundledResources();
  }*/

  hostUrl = AppConsts.remoteServiceBaseUrl + '/api/dashboards';

  switchToView = false;

  interval: any;

  timerId: 300000;

  dashboardId: any;

  minutesFilter = 0;

  isfullscreen = false;

  constructor(
            injector: Injector,
            private _appSessionService: AppSessionService,
            private router: Router,
            private _dashboardServiceProxy: DashboardServiceProxy,
            private _location:Location,
            private route: ActivatedRoute,
            private element: ElementRef
        ) {
            super(injector);
             ResourceManager.embedBundledResources();
            
  }

  ngOnInit() {

    
    

    
    $('.kt-select2').select2();
    this.route.paramMap.subscribe(params => {
            this.dashboardId = params.get("name")
    });
    this._dashboardServiceProxy.getDashboardTenantId().subscribe(result => {});
    this._dashboardServiceProxy.getDashboardUserId().subscribe(result => {});
  }

  ngAfterViewInit(): void {
    //alert(this.hostUrl);
    //this.timer();
    this.interval;


    this.dashboardControl = new DashboardControl(this.element.nativeElement.querySelector(".dashboard-container"), {
      // Specifies a URL of the Web Dashboard's server.
      //endpoint: "https://demos.devexpress.com/services/dashboard/api",
      endpoint: this.hostUrl,
      loadDefaultDashboard: false,
      workingMode: "Viewer",
      extensions: {
             'dashboard-export': {
              allowExportDashboardItems: false,
            }
      }

    });

    this.dashboardControl.loadDashboard(this.dashboardId);
    //.done(function () { alert("A dashboard is loaded successfully."); })
    //.fail(function() { alert("Cannot load a dashboard."); });

    this.dashboardControl.render();


  }
  ngOnDestroy(): void {
    
    this.dashboardControl && this.dashboardControl.dispose();
    clearInterval(this.interval);
  }

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

  
  refresh() {
    
    //this.dashboardControl.reloadData();
    this.minutesFilter = Number((<HTMLInputElement>document.getElementById('refreshMin')).value) != 0 ? Number((<HTMLInputElement>document.getElementById('refreshMin')).value) : undefined;
    clearInterval(this.interval);
    if(this.minutesFilter == undefined) {
          
          this.interval = setInterval(() => { 
              this.dashboardControl.reloadData();

              
          }, 300000);
      }
      else if(this.minutesFilter == 1) {
          this.interval = setInterval(() => { 
              this.dashboardControl.reloadData();

              
          }, 600000);
      }
      else if(this.minutesFilter == 2) {
          this.interval = setInterval(() => { 
              this.dashboardControl.reloadData();

              
          }, 1200000);
      }
       else if(this.minutesFilter == 3) {
          this.interval = setInterval(() => { 
              this.dashboardControl.reloadData();

              
          }, 1500000);
      }
      else if(this.minutesFilter == 4) {
          this.interval = setInterval(() => { 
              this.dashboardControl.reloadData();

              
          }, 1800000);
      }
  }

  
openfullscreen() {
  // Trigger fullscreen
    /*const docElmWithBrowsersFullScreenFunctions = document.getElementById("dashboardBody") as HTMLElement & {*/
  const docElmWithBrowsersFullScreenFunctions = document.documentElement as HTMLElement & {
    mozRequestFullScreen(): Promise<void>;
    webkitRequestFullscreen(): Promise<void>;
    msRequestFullscreen(): Promise<void>;
  };
 
  if (docElmWithBrowsersFullScreenFunctions.requestFullscreen) {
    docElmWithBrowsersFullScreenFunctions.requestFullscreen();
  } else if (docElmWithBrowsersFullScreenFunctions.mozRequestFullScreen) { /* Firefox */
    docElmWithBrowsersFullScreenFunctions.mozRequestFullScreen();
  } else if (docElmWithBrowsersFullScreenFunctions.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
    docElmWithBrowsersFullScreenFunctions.webkitRequestFullscreen();
  } else if (docElmWithBrowsersFullScreenFunctions.msRequestFullscreen) { /* IE/Edge */
    docElmWithBrowsersFullScreenFunctions.msRequestFullscreen();
  }
  this.isfullscreen = true;
}
 
closefullscreen(){
  const docWithBrowsersExitFunctions = document as Document & {
    mozCancelFullScreen(): Promise<void>;
    webkitExitFullscreen(): Promise<void>;
    msExitFullscreen(): Promise<void>;
  };
  if (docWithBrowsersExitFunctions.exitFullscreen) {
    docWithBrowsersExitFunctions.exitFullscreen();
  } else if (docWithBrowsersExitFunctions.mozCancelFullScreen) { /* Firefox */
    docWithBrowsersExitFunctions.mozCancelFullScreen();
  } else if (docWithBrowsersExitFunctions.webkitExitFullscreen) { /* Chrome, Safari and Opera */
    docWithBrowsersExitFunctions.webkitExitFullscreen();
  } else if (docWithBrowsersExitFunctions.msExitFullscreen) { /* IE/Edge */
    docWithBrowsersExitFunctions.msExitFullscreen();
  }
  this.isfullscreen = false;
}


}