import { Component, ElementRef, EventEmitter, Input, OnDestroy, Output, ViewChild } from '@angular/core';
import { SpinnerService } from '@core/services/spinner.service';
import { AdHocReportingAPI } from '@core/typings/api/ad-hoc-reporting.typing';
import { APISortColumn, PanelTypes, TypeToken } from '@yourcause/common';
import { ModalFactory } from '@yourcause/common/modals';
import { ChartType } from 'chart.js';
import { map, Subscription } from 'rxjs';
import { DashboardsService } from '../dashboards.service';
import { Dashboards, GCDashboards } from '../dashboards.typing';
import { ExpandedWidgetModalComponent } from '../expanded-widget-modal/expanded-widget-modal.component';

@Component({
  selector: 'yc-dashboard-widget',
  templateUrl: './dashboard-widget.component.html',
  styleUrls: ['./dashboard-widget.component.scss']
})
export class DashboardWidgetComponent implements OnDestroy {
  @Input()
  // TODO: hacky workaround, maybe ng2-charts upgrade makes obsolete
  set widget (value: GCDashboards.Widget) {
    if (this._widget !== value) {
      this._widget = null;
      setTimeout(() => {
        this.sub.add(
          value.onElementClick.pipe(
            map(e => this.onClick.emit(e)))
            .subscribe()
        );
        this._widget = value;
        this.checkForEmptyChart();
      });
    }
  }

  get widget (): GCDashboards.Widget {
    return this._widget;
  }

  @Input() showExpandIcon = true;
  @Input() showDownload = true;
  @Output() onClick = new EventEmitter<Dashboards.ChartClickEvent>();
  @Output() onSortColumnChange = new EventEmitter<APISortColumn<any>>();

  @ViewChild('canvasEl') canvasEl: ElementRef<HTMLCanvasElement>;

  AdHocReportingAPI = AdHocReportingAPI;
  private _widget: GCDashboards.Widget;
  PanelTypes = PanelTypes;
  masked: boolean;
  sub = new Subscription();
  showZeroState = false;
  $chartType = new TypeToken<ChartType>();

  constructor (
    private modalFactory: ModalFactory,
    private spinnerService: SpinnerService,
    private dashboardService: DashboardsService
  ) { }

  checkForEmptyChart () {
    const isChart = ![
      'table',
      'stat'
    ].includes(this.widget?.chartType);
    if (this.widget && isChart) {
      const data = this.widget?.chartData[0]?.data as number[];
      this.showZeroState = data?.every(item => item === 0);
    }
  }

  openStatDrilldown () {
    this.onClick.emit(null);
  }

  expandChart () {
    this.modalFactory.open(
      ExpandedWidgetModalComponent,
      {
        widget: this.widget
      }
    );
  }

  handleMaskChanged (masked: boolean) {
    this.masked = masked;
  }

  async download () {
    this.spinnerService.startSpinner();
    await this.dashboardService.handleDownload(
      this.widget,
      this.masked,
      this.canvasEl?.nativeElement
    );
    this.spinnerService.stopSpinner();
  }

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

}