import { AfterViewInit, Component, OnInit } from "@angular/core";
import {
  WidgetComponent,
  WidgetConfiguration,
  WidgetConfigure,
  WidgetId,
  WidgetInput,
} from "../../../widget.metadata";
import { WidgetConfig } from "../../../widget.configuration";
import { Observable, of, ReplaySubject } from "rxjs";
import { NgUnsubscribe } from "../../../../ng-unsubscribe";
import { AppContext } from "../../../../components/app-context/app.context";
import { map } from "rxjs/operators";
import { MatTabChangeEvent } from "@angular/material/tabs";
import {
  LocalStorageEntry,
  LocalStorageService,
} from "../../../../components/local-storage/local-storage.service";
import {
  DeletionMode,
  Scope,
} from "../../../../components/local-storage/local-storage-constants";

@WidgetComponent("nm-product-details-kpi")
@Component({
  selector: "nm-product-details-kpi",
  viewProviders: [],
  templateUrl: "./product-details-kpi.component.html",
  styleUrls: ["./product-details-kpi.component.scss"],
  providers: [],
})
export class ProductDetailsKpiComponent implements AfterViewInit, OnInit {
  @WidgetId()
  public _id: string;

  @WidgetConfiguration()
  public configuration: WidgetConfig;

  @WidgetInput("uri")
  private inputChannel: ReplaySubject<any> = new ReplaySubject<any>(1);

  @WidgetInput("productNo")
  private productNoInput: ReplaySubject<string> = new ReplaySubject<string>(1);

  @WidgetInput("reset")
  private resetChannel: ReplaySubject<any> = new ReplaySubject<any>(1);

  public wikiLink: string;
  public infotext: string;
  public title: string;
  public currentTitle: string;
  public lastTitle: string;
  public selector: string;
  public emptyMessage: string;
  public productNo: string;

  public tabs: any[];

  public selectedIndex;

  public registeredContent: string[];

  unsubscribe = NgUnsubscribe.create();
  public param: Observable<any>;
  private selectedTabLocalStorageEntry: LocalStorageEntry;

  constructor(
    private context: AppContext,
    private localStorageService: LocalStorageService
  ) {}

  @WidgetConfigure()
  protected configureWidget(configuration: WidgetConfig) {
    if (this.configuration.configuration.selectedTabLocalStorageKey) {
      this.selectedTabLocalStorageEntry = this.localStorageService.getLocalStorageEntry(
        this.configuration.configuration.selectedTabLocalStorageKey,
        Scope.GLOBAL,
        DeletionMode.LOGIN
      );

      if (this.selectedTabLocalStorageEntry.exists) {
        this.selectedIndex = parseInt(
          this.selectedTabLocalStorageEntry.value,
          10
        );
      }
    }
    this.infotext = this.configuration.configuration.infoText;
    this.title = this.configuration.configuration.title;
    this.wikiLink = this.configuration.configuration.wikiLink;
    this.currentTitle = this.configuration.configuration.currentTitle;
    this.lastTitle = this.configuration.configuration.lastTitle;
    this.selector = this.configuration.configuration.selector;
    this.emptyMessage = this.configuration.configuration.emptyMessage;

    this.context.browserContext
      .subscribe({ target: this.selector })
      .subscribe((value) => {
        this.registeredContent = value.map((s) => s.identifier);
      });

    this.tabs = [];

    this.configuration.configuration["tabs"].forEach((tab) => {
      if (
        this.registeredContent &&
        this.registeredContent.indexOf(tab.content.identifier) > -1
      ) {
        this.tabs.push(tab);
      }
    });

    this.param = this.productNoInput.pipe(
      map((productNo) => {
        return { productNo, resetChannel: this.resetChannel };
      })
    );
  }

  public selectedTabChange(event: MatTabChangeEvent) {
    const index = event.index;
    if (this.selectedTabLocalStorageEntry) {
      this.selectedTabLocalStorageEntry.value = index;
    }
  }

  public ngOnInit() {}

  ngAfterViewInit() {}
}