import { Inject, forwardRef, ElementRef, NgZone, Input, AfterContentInit, OnDestroy } from "@angular/core";
import { Subscription } from "rxjs/internal/Subscription";
import { Portlet } from "../../portlet/portlet";
import * as am4core from "@amcharts/amcharts4/core";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";

declare const jQuery;

export class BaseAmChart implements AfterContentInit, OnDestroy {
  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(element.nativeElement).find("#amChart");

      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);
    })
  }

  @Input("rd-title") title: string;
  @Input("rd-animated") animated: boolean = true;
  @Input("rd-export") export: boolean = false;
  @Input("rd-height") height: number | string = 300;
  @Input("rd-dimension") dimension: string = "2D" // 2d or 3d

  protected chart;
  protected container;
  private routeSubs: Subscription;

  ngAfterContentInit() {
    this.container = jQuery(this.element.nativeElement).find("#amChart")[0];
    if (this.animated) am4core.useTheme(am4themes_animated);
  }

  ngDoCheck() {
    /** for amchart logo remove**/
    let titles = jQuery(this.container).find("title");
    for (let item of titles)
      if (item.textContent != "Zoom Out") jQuery(item).parent().remove();
  }

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

  custom_am4theme(target) {
    if (target instanceof am4core.ColorSet) {
      target.list = [
        am4core.color("#CD605F"),
        am4core.color("#0086C1"),
        am4core.color("#63DB9A"),
        am4core.color("#E87E04"),
        am4core.color("#00887C"),
        am4core.color("#A165D7"),
        am4core.color("#57DEFD"),
        am4core.color("#DF7164"),
        am4core.color("#646FD7"),
        am4core.color("#A5D7D0"),
        am4core.color("#A31543"),
        am4core.color("#00707F"),
        am4core.color("#DB89A0"),
        am4core.color("#9E6E9B"),
        am4core.color("#5D6F75"),
        am4core.color("#AECB31"),
        am4core.color("#A5BDD7"),
        am4core.color("#BB7862")
      ]
    }
  }

  setExportMenu() {
    this.chart.exporting.menu.items = [
      {
        "label": "...",
        "menu": [
          { "type": "png", "label": "PNG" },
          { "type": "pdf", "label": "PDF" },
          { "type": "xlsx", "label": "XLSX" },
          { "type": "print", "label": "Print" }
        ]
      }
    ]
  }
}