import { Inject, forwardRef, ElementRef, Input, NgZone } from "@angular/core";
import { Subscription } from "rxjs/internal/Subscription";
import { Portlet } from "../../portlet/portlet";

declare const jQuery;

export class BaseAmChartV3 {
  constructor(public zone: NgZone, public element: ElementRef, @Inject(forwardRef(() => Portlet)) portlet: Portlet) {

    let width;
    let height;
    let beforeFullScreenWidth;
    let beforeFullScreenHeight;

    this.routeSubs = portlet.fullScreenEvent.subscribe(isFullScreen => {
      let amchart = jQuery(this.element.nativeElement).find("div");

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

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

      jQuery(amchart).animate({ "height": height, "width": width }, 500);
      setTimeout(() => {
        this.chart.invalidateSize();
      }, 1000);
    })
  }

  @Input("rd-title") title: string;

  protected chart;
  protected container;
  private routeSubs: Subscription;
  public jQuery = jQuery;
  public ID = "amchartv3" + Math.random().toFixed(5);

  ngOnInit() {
    this.container = jQuery(this.element.nativeElement).find("div")[0];
  }

  ngOnDestroy() {
    this.zone.runOutsideAngular(() => {
      if (this.chart && this.chart.clear) this.chart.clear();
      this.routeSubs.unsubscribe();
    })
  }

  colorList = ["#CD605F", "#0086C1", "#63DB9A", "#E87E04", "#00887C", "#A165D7", "#57DEFD", "#DF7164", "#646FD7", "#A5D7D0", "#A31543", "#00707F", "#DB89A0", "#9E6E9B", "#5D6F75", "#AECB31", "#A5BDD7", "#BB7862"];
}