import { Component, NgZone, ElementRef, Input, Output, OnChanges, AfterViewInit, EventEmitter } from "@angular/core";
import { Portlet } from "../../portlet/portlet";
import { BaseAmChart } from "./baseAmChart";
import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";

export interface ITimeLineItem {
  name: string;
  valueX: string;
  valueY: string;
  size?: string;
  hidden?: boolean;
}

@Component({
  selector: "rd-amchart-timeline",
  template: `
    <div id="amChart" style="width:100%" [style.height.px]="height"></div>
  `
})
export class AmChartTimeline extends BaseAmChart implements OnChanges, AfterViewInit {
  constructor(zone: NgZone, public element: ElementRef, portlet: Portlet) {
    super(zone, element, portlet);
  }

  @Input("rd-data") data: Array<object> = [];
  @Input("rd-series") series: Array<ITimeLineItem> = [];

  ngAfterViewInit() {
    this.zone.runOutsideAngular(() => {

      if (this.export) {
        this.chart.exporting.menu = new am4core.ExportMenu();
        this.setExportMenu();
      }
    });
  }

  ngOnChanges(changes) {
    if (!this.chart) return;
    if (changes.data) this.chart.data = this.data;
    // if (changes.series) this.setSeriesAndBullets();
  }
}