import { Inject, forwardRef, ElementRef, Input, AfterViewInit, OnDestroy, Optional } from "@angular/core";
import { Subscription } from "rxjs/internal/Subscription";
import { Portlet } from "../../portlet/portlet";
import { ScriptLoaderService } from "../../../library/script-loader.service";
import { themes } from "./themes";

declare const jQuery;
declare const Highcharts;

export abstract class BaseHighChart implements AfterViewInit, OnDestroy {
  constructor(public element: ElementRef, @Inject(forwardRef(() => Portlet)) portlet: Portlet, @Optional() script?: ScriptLoaderService) {

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

    this.routeSubs = portlet.fullScreenEvent.subscribe(isFullScreen => {
      let highchart = jQuery(element.nativeElement).find("#highchart")[0];

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

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

      jQuery(highchart).animate({ "height": height, "width": width }, 500);
    });
  }

  @Input("rd-title") title: string;
  @Input("rd-height") height: any = 350;

  protected chart;
  protected container;
  private routeSubs: Subscription;

  ngAfterViewInit() {
    this.container = jQuery(this.element.nativeElement).find("#highchart")[0];
  }

  ngOnDestroy() {
    this.routeSubs.unsubscribe();
  }

  toggleTheme(isDefault, theme) {
    Highcharts.setOptions(isDefault ? themes.default : theme);
    this.render();
  }

  abstract render();
}