import { Component, AfterViewInit, ElementRef, OnDestroy, Inject } 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 { NotifyService } from '@abp/notify/notify.service';
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';
import {TextBoxItemEditorExtension} from 'devexpress-dashboard/designer/text-box-item-editor-extension';
import {DOCUMENT} from '@angular/common';
import themes from "devextreme/ui/themes"; 

@Component({
  selector: 'edit-dashboard',
  encapsulation: ViewEncapsulation.None,
  templateUrl: './edit-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",
    "../../../../node_modules/devexpress-richedit/dist/dx.richedit.css"




  ]
})

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

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

  switchToView = false;

  dashboardId: any;

  constructor(
            injector: Injector,
            private _appSessionService: AppSessionService,
            private _dashboardServiceProxy: DashboardServiceProxy,
            private router: Router,
            private _location:Location,
            private _notifyService: NotifyService,
            private _tokenAuth: TokenAuthServiceProxy,
            private route: ActivatedRoute,
            private element: ElementRef,
            @Inject(DOCUMENT) private document
        ) {
            super(injector);
             ResourceManager.embedBundledResources();
            
  }

  ngOnInit() {

    
    
    this._dashboardServiceProxy.getDashboardTenantId().subscribe(result => {});
    this._dashboardServiceProxy.getDashboardUserId().subscribe(result => {});
    

    this.route.paramMap.subscribe(params => {
            this.dashboardId = params.get("name")
    });

  }

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

    

    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,
      workingMode: "Designer",
      loadDefaultDashboard: false,
      extensions: {
        //'dashboard-panel': function (control) { return new DashboardPanelExtension(control); },  
        'data-source-wizard': {  
          enableCustomSql: true  
        }  
      }
    });
    this.dashboardControl.registerExtension(new TextBoxItemEditorExtension(this.dashboardControl));
    
    

    this.dashboardControl.loadDashboard(this.dashboardId);
    //.done(function () { alert("A dashboard is loaded successfully."); })
    //.fail(function() { alert("Cannot load a dashboard."); });
    //this.dashboardControl.unregisterExtension('dashboard-color-scheme-editor');
    this.dashboardControl.render();
  }
  ngOnDestroy(): void {
    this.dashboardControl && this.dashboardControl.dispose();
  }

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

  switch(){
    //var button = document.getElementById("button1");
                    var workingMode = this.dashboardControl.isDesignMode();
                    if (workingMode == true) {
                        this.dashboardControl.switchToViewer();
                        //button.value = "Switch to Designer";
                        this.switchToView = true;
                    }
                    else {
                        this.dashboardControl.switchToDesigner();
                        //button.value = "Switch to Viewer";
                        this.switchToView = false;
                    }
  }  
}