import {
  combineLatest as observableCombineLatest,
  ReplaySubject,
  timer as observableTimer,
} from "rxjs";

import { map, mergeMap, takeUntil } from "rxjs/operators";
import { Component, OnDestroy } from "@angular/core";
import { getOrDefault, WidgetConfig } from "../../widget.configuration";
import {
  WidgetComponent,
  WidgetConfiguration,
  WidgetConfigure,
  WidgetId,
  WidgetInput,
} from "../../widget.metadata";
import { WidgetframeService } from "../../widgetframe/widgetframe.service";
import { HttpClient } from "@angular/common/http";
import { CurrentLocaleService } from "../../../components/i18n/currentLocale.service";
import { Link } from "../../../components/hal/hal";
import { NgUnsubscribe } from "../../../ng-unsubscribe";
import { WidgetframeComponentConfiguration } from "../../widgetframe/widgetframe.component";

declare var contextPath: string;

export interface InfoCountConfiguration
  extends WidgetframeComponentConfiguration {
  /**
   * Sets CSS class name for the widget header
   */
  header: string;

  /**
   * Shows/Hides the widget header @default(true)
   */
  withHeader?: boolean;
}

@WidgetComponent("nm-info-count")
@Component({
  selector: "nm-info-count",
  templateUrl: "./info-count.component.html",
  styleUrls: ["./info-count.component.scss"],
  providers: [WidgetframeService],
})
export class InfoCountComponentWidget implements OnDestroy {
  data: any[];
  view: any[] = [283, 100];
  valueClass: String = "nm-5-digets";
  colorScheme = {
    domain: ["#ffffff"],
  };

  public withHeader: boolean;

  @WidgetConfiguration()
  public configuration: WidgetConfig<InfoCountConfiguration>;

  /**
   * Sets the data used by the embedded 'ngx-charts-number-card' component to display the count
   */
  @WidgetInput("data")
  private dataInput = new ReplaySubject<any>(1);

  @WidgetId()
  public _id;

  private unsubscribe = NgUnsubscribe.create();

  constructor(
    private http: HttpClient,
    private currentLocaleService: CurrentLocaleService
  ) {
    this.data = [
      {
        name: "",
        value: 0,
      },
    ];
  }

  @WidgetConfigure()
  protected configureWidget(
    configuration: WidgetConfig<InfoCountConfiguration>
  ) {
    this.withHeader = getOrDefault(
      configuration.configuration.withHeader,
      true
    );
    this.dataInput.pipe(takeUntil(this.unsubscribe)).subscribe((data) => {
      this.setData(data);
    });
    if (!configuration._links || !configuration._links["data"]) {
      return;
    }
    let href = (<Link>configuration._links["data"]).href;

    observableCombineLatest(
      observableTimer(0, 5 * 60 * 1000),
      this.currentLocaleService.getCurrentLocale(),
      (interval, locale) => interval
    )
      .pipe(
        mergeMap((interval) => this.http.get(href)),
        map((res) => res["data"][0]),
        takeUntil(this.unsubscribe)
      )
      .subscribe((data) => {
        this.setData(data);
      });
  }

  private setData(data) {
    if (data[0].value.toString().length < 5) {
      this.valueClass = "nm-4-digets";
    } else if (data[0].value.toString().length === 5) {
      this.valueClass = "nm-5-digets";
    } else if (data[0].value.toString().length === 6) {
      this.valueClass = "nm-6-digets";
    } else if (data[0].value.toString().length > 6) {
      this.valueClass = "nm-7-digets";
    }
    this.data = data;
  }

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