import { Inject, forwardRef, ElementRef, Input, OnInit, OnDestroy } from "@angular/core";
import { Subscription } from "rxjs/internal/Subscription";
import { RdLib } from "../../../base/rdLib";
import { Portlet } from "../../portlet/portlet";

declare const jQuery;

export interface IDevChartSerieItem {
  valueField: string;
  name: string;
}

export class BaseChart implements OnInit, OnDestroy {
  constructor(public element: ElementRef, @Inject(forwardRef(() => Portlet)) portlet?: Portlet) {
    if (portlet) {
      let width;
      let height;
      let beforeFullScreenWidth;
      let beforeFullScreenHeight;

      this.routeSubs = portlet.fullScreenEvent.subscribe(isFullScreen => {
        let dxNativeElement = jQuery(element.nativeElement).find("#dxElement");

        if (isFullScreen) {
          beforeFullScreenWidth = dxNativeElement.css("width");
          beforeFullScreenHeight = dxNativeElement.css("height");

          width = window.innerWidth * 0.95;
          height = window.innerHeight * 0.85;
        }
        else {
          width = beforeFullScreenWidth;
          height = beforeFullScreenHeight;
        }

        dxNativeElement.css({ "height": height, "width": width });
      })
    }
  }

  @Input("rd-export") export = true;

  protected container;
  protected instance;
  protected routeSubs: Subscription;
  protected dxElement;
  protected initialized: boolean = false;
  protected previousWidth: number;
  protected palette = RdLib.constants.colorPalette('pastel');

  ngOnInit() {
    this.container = jQuery(this.element.nativeElement).find("#dxElement");
  }

  ngOnDestroy() {
    if (!this.container[0].clientWidth) return;
    if (this.instance == "CircleGauge") this.container.dxCircularGauge("dispose");
    else if (this.instance == "ColorPicker") this.container.dxColorBox("dispose");
    else if (this.instance == "PieChart") this.container.dxPieChart("dispose");
    else if (this.instance == "PolarChart") this.container.dxPolarChart("dispose");
    else this.container.dxChart("dispose");

    if (this.routeSubs) this.routeSubs.unsubscribe();
    this.container.remove();
  }
}