import {
  AfterViewInit,
  Directive,
  ElementRef,
  EventEmitter,
  Inject,
  InjectionToken,
  Input,
  NgZone,
  OnChanges,
  OnDestroy,
  OnInit,
  Output,
  SimpleChanges,
} from '@angular/core';
import { Observable, ReplaySubject, Subject, Subscription, asyncScheduler } from 'rxjs';
import { switchMap, throttleTime } from 'rxjs/operators';
import { ChangeFilterV2 } from './change-filter-v2';
import type { EChartsOption, ECharts, ECElementEvent } from 'echarts';

export interface NgxEchartsConfig {
  echarts: any | (() => Promise<any>);
  theme?: string | ThemeOption;
}

export type ThemeOption = Record<string, any>;

export const NGX_ECHARTS_CONFIG = new InjectionToken<NgxEchartsConfig>('NGX_ECHARTS_CONFIG');

@Directive({
  standalone: true,
  selector: 'echarts, [echarts]',
  exportAs: 'echarts',
})
export class NgxEchartsDirective implements OnChanges, OnDestroy, OnInit, AfterViewInit {
  @Input() options: EChartsOption | null = null;
  @Input() theme: string | ThemeOption | null = null;
  @Input() initOpts: {
    devicePixelRatio?: number;
    renderer?: string;
    width?: number | string;
    height?: number | string;
    locale?: string;
  } | null = null;
  @Input() merge: EChartsOption | null = null;
  @Input() autoResize = true;
  @Input() loading = false;
  @Input() loadingType = 'default';
  @Input() loadingOpts: object | null = null;

  // ngx-echarts events
  @Output() chartInit = new EventEmitter<any>();
  @Output() optionsError = new EventEmitter<Error>();

  // echarts mouse events
  @Output() chartClick = this.createLazyEvent<ECElementEvent>('click');
  @Output() chartDblClick = this.createLazyEvent<ECElementEvent>('dblclick');
  @Output() chartMouseDown = this.createLazyEvent<ECElementEvent>('mousedown');
  @Output() chartMouseMove = this.createLazyEvent<ECElementEvent>('mousemove');
  @Output() chartMouseUp = this.createLazyEvent<ECElementEvent>('mouseup');
  @Output() chartMouseOver = this.createLazyEvent<ECElementEvent>('mouseover');
  @Output() chartMouseOut = this.createLazyEvent<ECElementEvent>('mouseout');
  @Output() chartGlobalOut = this.createLazyEvent<ECElementEvent>('globalout');
  @Output() chartContextMenu = this.createLazyEvent<ECElementEvent>('contextmenu');

  // echarts events
  @Output() chartHighlight = this.createLazyEvent<any>('highlight');
  @Output() chartDownplay = this.createLazyEvent<any>('downplay');
  @Output() chartSelectChanged = this.createLazyEvent<any>('selectchanged');
  @Output() chartLegendSelectChanged = this.createLazyEvent<any>('legendselectchanged');
  @Output() chartLegendSelected = this.createLazyEvent<any>('legendselected');
  @Output() chartLegendUnselected = this.createLazyEvent<any>('legendunselected');
  @Output() chartLegendLegendSelectAll = this.createLazyEvent<any>('legendselectall');
  @Output() chartLegendLegendInverseSelect = this.createLazyEvent<any>('legendinverseselect');
  @Output() chartLegendScroll = this.createLazyEvent<any>('legendscroll');
  @Output() chartDataZoom = this.createLazyEvent<any>('datazoom');
  @Output() chartDataRangeSelected = this.createLazyEvent<any>('datarangeselected');
  @Output() chartGraphRoam = this.createLazyEvent<any>('graphroam');
  @Output() chartGeoRoam = this.createLazyEvent<any>('georoam');
  @Output() chartTreeRoam = this.createLazyEvent<any>('treeroam');
  @Output() chartTimelineChanged = this.createLazyEvent<any>('timelinechanged');
  @Output() chartTimelinePlayChanged = this.createLazyEvent<any>('timelineplaychanged');
  @Output() chartRestore = this.createLazyEvent<any>('restore');
  @Output() chartDataViewChanged = this.createLazyEvent<any>('dataviewchanged');
  @Output() chartMagicTypeChanged = this.createLazyEvent<any>('magictypechanged');
  @Output() chartGeoSelectChanged = this.createLazyEvent<any>('geoselectchanged');
  @Output() chartGeoSelected = this.createLazyEvent<any>('geoselected');
  @Output() chartGeoUnselected = this.createLazyEvent<any>('geounselected');
  @Output() chartAxisAreaSelected = this.createLazyEvent<any>('axisareaselected');
  @Output() chartBrush = this.createLazyEvent<any>('brush');
  @Output() chartBrushEnd = this.createLazyEvent<any>('brushend');
  @Output() chartBrushSelected = this.createLazyEvent<any>('brushselected');
  @Output() chartGlobalCursorTaken = this.createLazyEvent<any>('globalcursortaken');
  @Output() chartRendered = this.createLazyEvent<any>('rendered');
  @Output() chartFinished = this.createLazyEvent<any>('finished');

  public animationFrameID = null;
  private chart: ECharts;
  private chart$ = new ReplaySubject<ECharts>(1);
  private echarts: any;
  private resizeOb: ResizeObserver;
  private resize$ = new Subject<void>();
  private resizeSub: Subscription;
  private initChartTimer?: number;
  private changeFilter = new ChangeFilterV2();
  private loadingSub: Subscription;
  private resizeObFired: boolean = false;

  constructor(
    @Inject(NGX_ECHARTS_CONFIG) config: NgxEchartsConfig,
    private el: ElementRef,
    private ngZone: NgZone
  ) {
    this.echarts = config.echarts;
    this.theme = config.theme || null;
  }

  ngOnChanges(changes: SimpleChanges) {
    this.changeFilter.doFilter(changes);
  }

  ngOnInit() {
    if (!window.ResizeObserver) {
      throw new Error('please install a polyfill for ResizeObserver');
    }
    this.resizeSub = this.resize$
      .pipe(throttleTime(100, asyncScheduler, { leading: false, trailing: true }))
      .subscribe(() => this.resize());

    if (this.autoResize) {
      // https://github.com/xieziyu/ngx-echarts/issues/413
      this.resizeOb = this.ngZone.runOutsideAngular(
        () =>
          new window.ResizeObserver(entries => {
            for (const entry of entries) {
              if (entry.target === this.el.nativeElement) {
                // Ignore first fire on insertion, no resize actually happened
                if (!this.resizeObFired) {
                  this.resizeObFired = true;
                } else {
                  this.animationFrameID = window.requestAnimationFrame(() => {
                    this.resize$.next();
                  });
                }
              }
            }
          })
      );
      this.resizeOb.observe(this.el.nativeElement);
    }

    this.changeFilter.notFirstAndEmpty('options', opt => this.onOptionsChange(opt));
    this.changeFilter.notFirstAndEmpty('merge', opt => this.setOption(opt));
    this.changeFilter.has<boolean>('loading', v => this.toggleLoading(!!v));
    this.changeFilter.notFirst<string | ThemeOption>('theme', () => this.refreshChart());
  }

  ngOnDestroy() {
    window.clearTimeout(this.initChartTimer);
    if (this.resizeSub) {
      this.resizeSub.unsubscribe();
    }
    if (this.animationFrameID) {
      window.cancelAnimationFrame(this.animationFrameID);
    }
    if (this.resizeOb) {
      this.resizeOb.unobserve(this.el.nativeElement);
    }
    if (this.loadingSub) {
      this.loadingSub.unsubscribe();
    }
    this.changeFilter.dispose();
    this.dispose();
  }

  ngAfterViewInit() {
    this.initChartTimer = window.setTimeout(() => this.initChart());
  }

  private dispose() {
    if (this.chart) {
      if (!this.chart.isDisposed()) {
        this.chart.dispose();
      }
      this.chart = null;
    }
  }

  /**
   * resize chart
   */
  resize() {
    if (this.chart) {
      this.chart.resize();
    }
  }

  private toggleLoading(loading: boolean) {
    if (this.chart) {
      loading
        ? this.chart.showLoading(this.loadingType, this.loadingOpts)
        : this.chart.hideLoading();
    } else {
      this.loadingSub = this.chart$.subscribe(chart =>
        loading ? chart.showLoading(this.loadingType, this.loadingOpts) : chart.hideLoading()
      );
    }
  }

  private setOption(option: any, opts?: any) {
    if (this.chart) {
      try {
        this.chart.setOption(option, opts);
      } catch (e) {
        console.error(e);
        this.optionsError.emit(e);
      }
    }
  }

  /**
   * dispose old chart and create a new one.
   */
  async refreshChart() {
    this.dispose();
    await this.initChart();
  }

  private createChart() {
    const dom = this.el.nativeElement;

    if (window && window.getComputedStyle) {
      const prop = window.getComputedStyle(dom, null).getPropertyValue('height');
      if ((!prop || prop === '0px') && (!dom.style.height || dom.style.height === '0px')) {
        dom.style.height = '400px';
      }
    }

    // here a bit tricky: we check if the echarts module is provided as function returning native import('...') then use the promise
    // otherwise create the function that imitates behaviour above with a provided as is module
    return this.ngZone.runOutsideAngular(() => {
      const load =
        typeof this.echarts === 'function' ? this.echarts : () => Promise.resolve(this.echarts);

      return load().then(({ init }) => init(dom, this.theme, this.initOpts));
    });
  }

  private async initChart() {
    await this.onOptionsChange(this.options);

    if (this.merge && this.chart) {
      this.setOption(this.merge);
    }
  }

  private async onOptionsChange(opt: any) {
    if (!opt) {
      return;
    }

    if (this.chart) {
      this.setOption(this.options, true);
    } else {
      this.chart = await this.createChart();
      this.chart$.next(this.chart);
      this.chartInit.emit(this.chart);
      this.setOption(this.options, true);
    }
  }

  // allows to lazily bind to only those events that are requested through the `@Output` by parent components
  // see https://stackoverflow.com/questions/51787972/optimal-reentering-the-ngzone-from-eventemitter-event for more info
  private createLazyEvent<T>(eventName: string): EventEmitter<T> {
    return this.chartInit.pipe(
      switchMap(
        (chart: any) =>
          new Observable(observer => {
            chart.on(eventName, (data: T) => this.ngZone.run(() => observer.next(data)));
            return () => {
              if (this.chart) {
                if (!this.chart.isDisposed()) {
                  chart.off(eventName);
                }
              }
            };
          })
      )
    ) as EventEmitter<T>;
  }
}