import { Component } from "@angular/core";
import { WidgetConfig } from "../../widget.configuration";
import {
  WidgetComponent,
  WidgetConfiguration,
  WidgetConfigure,
  WidgetId,
  WidgetInput,
} from "../../widget.metadata";
import { Observable, Subject } from "rxjs";
import { WidgetframeService } from "../../widgetframe/widgetframe.service";
import {
  LocalStorageEntry,
  LocalStorageEntryConfig,
  LocalStorageService,
} from "../../../components/local-storage/local-storage.service";
import {
  DeletionMode,
  Scope,
} from "../../../components/local-storage/local-storage-constants";
import { OverlayContainer } from "@angular/cdk/overlay";
import { ConfigService } from "./config.service";

declare var contextPath: string;
declare var $;
export const defaultTheme = "light-theme";

export const themeLocalStorageConfig: LocalStorageEntryConfig = {
  deletionMode: DeletionMode.NEVER,
  key: "nm-theme",
  scope: Scope.UNSCOPED,
};

@WidgetComponent("nm-config")
@Component({
  selector: "nm-config",
  templateUrl: "./config.component.html",
  styleUrls: ["./config.component.scss"],
})
export class ConfigWidgetComponent {
  @WidgetInput()
  public productNo = new Subject<any>();

  @WidgetConfiguration()
  public configuration: WidgetConfig;

  @WidgetId()
  public _id;

  //Variable for the template
  public themes;
  currentTheme: string;

  private themeEntry: LocalStorageEntry;

  constructor(
    private localStorageService: LocalStorageService,
    private overlayContainer: OverlayContainer,
    private configService: ConfigService
  ) {}

  @WidgetConfigure()
  protected configureWidget(configuration: WidgetConfig) {
    this.themeEntry = this.localStorageService.getLocalStorageEntryByConfig(
      themeLocalStorageConfig
    );
    this.configService.getThemes().subscribe((themes) => {
      this.themes = themes;
      if (
        this.themeEntry.exists() &&
        this.themes
          .map((entry) => entry.identifier)
          .includes(this.themeEntry.value)
      ) {
        this.currentTheme = this.themeEntry.value;
      } else {
        this.currentTheme = this.themes.find(
          (entry) => entry.default
        ).identifier;
      }
      this.change(false);
    });
  }

  public change(withReload) {
    this.themeEntry.value = this.currentTheme;
    for (let entry of this.themes) {
      <any>$("body").removeClass(entry.identifier);
    }
    <any>$("body ").addClass(this.currentTheme);
  }
}