import { filter } from "rxjs/operators";
import { Component } from "@angular/core";
import { Subject, Subscription } from "rxjs";
import { WidgetframeService } from "../../widgetframe/widgetframe.service";
import { getOrDefault, WidgetConfig } from "../../widget.configuration";
import {
  WidgetComponent,
  WidgetConfiguration,
  WidgetConfigure,
  WidgetId,
  WidgetInput,
  WidgetOutput,
} from "../../widget.metadata";
import {
  LocalStorageEntry,
  LocalStorageService,
} from "../../../components/local-storage/local-storage.service";
import {
  DeletionMode,
  Scope,
} from "../../../components/local-storage/local-storage-constants";

@WidgetComponent("nm-product-search-reset")
@Component({
  selector: "nm-product-search-reset",
  templateUrl: "./productsearchreset.component.html",
  styleUrls: ["./productsearchreset.component.scss"],
})
export class ProductSearchResetWidgetComponent {
  @WidgetConfiguration()
  private configuration: WidgetConfig;

  @WidgetOutput("reset")
  private reset: Subject<any>;

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

  @WidgetInput("hideButton")
  private hideButton: Subject<any> = new Subject<any>();

  @WidgetInput("hide")
  private hide: Subject<any> = new Subject<any>();

  @WidgetId()
  private _id: string;

  public style: boolean;

  private localstorageEntries: LocalStorageEntry[];
  private inputSubscription: Subscription;
  public isResetButtonNeeded: boolean;
  public isRoundStyle: boolean = true;
  public placeholder: string;
  public isHidden: boolean;

  constructor(
    private _widgetframeService: WidgetframeService,
    private localstorageService: LocalStorageService
  ) {
    this.inputSubscription = this.inputChannel
      .asObservable()
      .pipe(filter((link) => link))
      .subscribe((link) => {
        let isResetButtonNeeded = false;
        if (this.localstorageEntries) {
          this.localstorageEntries.forEach((entry) => {
            if (entry.value) {
              isResetButtonNeeded = true;
            }
          });
        }
        if (isResetButtonNeeded) {
          this.isResetButtonNeeded = isResetButtonNeeded;
          return;
        }
        // TODO: Find Better critera for showing the button!!
        if (
          (<any>link).indexOf("category") !== -1 ||
          localStorage.getItem(
            "productcomparison-portal-product-comparison-nm-product-listInput"
          ) ||
          localStorage.getItem("imarket-order-search-nm-order-searchInput")
        ) {
          this.isResetButtonNeeded = true;
        } else {
          this.isResetButtonNeeded = false;
        }
      });
  }

  resetSearch() {
    this.reset.next(Date.now);
    this.isResetButtonNeeded = false;
  }

  @WidgetConfigure()
  protected configureWidget(configuration: WidgetConfig) {
    if (configuration.configuration["isRoundStyle"] != undefined) {
      this.isRoundStyle = configuration.configuration["isRoundStyle"];
    }
    this.placeholder = getOrDefault(
      configuration.configuration["placeholder"],
      ""
    );
    if (this.configuration.configuration["localstorage-config"]) {
      let localStorageConfigs = this.configuration.configuration[
        "localstorage-config"
      ];
      this.localstorageEntries = [];
      localStorageConfigs.forEach((config) => {
        const scope: Scope = config.scope
          ? Scope[<string>config.scope]
          : Scope.GLOBAL;
        const localstorageEntry = this.localstorageService.getLocalStorageEntry(
          config.key,
          scope,
          DeletionMode.NEVER
        );
        this.localstorageEntries.push(localstorageEntry);
      });
    }
    this.style = this.configuration.configuration["customStyle"];

    this.hideButton.asObservable().subscribe((hide) => {
      this.isResetButtonNeeded = false;
    });

    this.hide.asObservable().subscribe((hide) => {
      this.isHidden = hide;
    });
  }
}