import {
  timer,
  combineLatest,
  Observable,
  Subscription,
  ReplaySubject,
  Subject,
} from "rxjs";
import { takeUntil } from "rxjs/operators";
import { Component, OnDestroy } from "@angular/core";
import {
  WidgetComponent,
  WidgetId,
  WidgetConfiguration,
  WidgetConfigure,
  WidgetInput,
} from "../widget.metadata";
import { WidgetframeService } from "../widgetframe/widgetframe.service";
import { getOrDefault, WidgetConfig } from "../widget.configuration";
import { NgUnsubscribe } from "../../ng-unsubscribe";
import { CurrentLocaleService } from "../../components/i18n/currentLocale.service";
import { Link } from "../../components/hal/hal";

export interface InfoDetailsConfiguration {
  header?: string;
  title?: string;
  infoText?: string;
  infoWidth?: string;
  infoHeight?: string;
  interval?: number;
}

/**
 * This class represents info details widget.
 */
@WidgetComponent("nm-info-details")
@Component({
  selector: "nm-info-details",
  templateUrl: "./info-details.component.html",
  styleUrls: ["./info-details.component.scss"],
})
export class InfoDetailsComponentWidget implements OnDestroy {
  @WidgetConfiguration()
  public configuration: WidgetConfig<InfoDetailsConfiguration>;

  @WidgetId()
  public _id;

  @WidgetInput("data")
  private dataInput = new Subject<any>();

  public data: any[] = [
    { group: "", data: [{ name: "", value: "", link: null }] },
  ];
  public title: string;
  public infoText: string;
  public infoWidth: string;
  public infoHeight: string;
  public header: string;
  public interval: number;
  public color: string;

  private unsubscribe = NgUnsubscribe.create();

  constructor(
    private currentLocaleService: CurrentLocaleService,
    private widgetframeService: WidgetframeService
  ) {}

  @WidgetConfigure()
  protected configureWidget(configuration: WidgetConfig) {
    this.header = configuration.configuration.header;
    this.title = configuration.configuration.title;
    this.color = getOrDefault(configuration.configuration.color, "grey");

    this.infoText = configuration.configuration.infoText;
    this.infoWidth = configuration.configuration.infoWidth;
    this.infoHeight = configuration.configuration.infoHeight;
    this.interval = configuration.configuration.interval || 5 * 60 * 1000;

    const url = (<Link>configuration._links.data).href;
    combineLatest(
      timer(0, this.interval),
      this.currentLocaleService.getCurrentLocale(),
      (interval, locale) => interval
    )
      .pipe(takeUntil(this.unsubscribe))
      .subscribe((action) => {
        this.widgetframeService.getData(url).subscribe((response) => {
          this.data = response.data;
          this.data.forEach((value) => {
            value.data.sort((a, b) => a.name.localeCompare(b.name));
          });
        });
      });
  }

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