import {
  combineLatest as observableCombineLatest,
  Subject,
  Observable,
  ReplaySubject,
  BehaviorSubject,
} from "rxjs";

import { distinctUntilChanged, filter } from "rxjs/operators";
import { Component } from "@angular/core";
import { WidgetframeService } from "../../../widgetframe/widgetframe.service";
import { WidgetConfig } from "../../../widget.configuration";
import {
  WidgetComponent,
  WidgetConfiguration,
  WidgetConfigure,
  WidgetId,
  WidgetInput,
  WidgetOutput,
} from "../../../widget.metadata";
import { FormBuilder, FormGroup } from "@angular/forms";
import { ListService } from "../../../list/index";
import * as uriTemplates_ from "uri-templates";
import {
  LocalStorageEntry,
  LocalStorageService,
} from "../../../../components/local-storage/local-storage.service";
import {
  DeletionMode,
  Scope,
} from "../../../../components/local-storage/local-storage-constants";

const uriTemplates = uriTemplates_;

@WidgetComponent("nm-color-search")
@Component({
  selector: "nm-color-search",
  templateUrl: "./color-search.component.html",
  styleUrls: ["./color-search.component.scss"],
})
export class ColorSearchWidgetComponent {
  public cols: any[];
  private attributes: any;
  public inputLink: string;
  public wikiLink: string;
  public infotext: string;
  public title: string;
  public inputLinklistSearch: string;
  public enableListsearch: boolean;
  public enableListSearchOnly: boolean;
  public enableTemplating: boolean = true;
  public placeholderkey;
  string;

  public localstorageIsListSearchEntry: LocalStorageEntry;
  private localstorageSearchEntry: LocalStorageEntry;
  private localstorageListsearchEntry: LocalStorageEntry;

  @WidgetConfiguration()
  public configuration: WidgetConfig;

  @WidgetOutput("uri")
  private uri: Subject<any> = new ReplaySubject<any>(1);

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

  @WidgetInput("set")
  private inputChannel: Subject<any> = new BehaviorSubject<any>(null);

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

  @WidgetOutput("clearcategorysearch")
  private clearCategorySearch: Subject<any> = new Subject<any>();

  @WidgetOutput("triggerSearch")
  private triggerSearch: Subject<any> = new Subject<any>();

  @WidgetOutput("returnPressed")
  private returnPressed: Subject<any> = new Subject<any>();

  private storageValue: Subject<any> = new ReplaySubject<any>(1);

  @WidgetId()
  public _id: string;

  private sub;
  public searchform: FormGroup;

  public listsearch: boolean = false;

  constructor(
    private _widgetframeService: WidgetframeService,
    private formBuilder: FormBuilder,
    private _listService: ListService,
    private localStorageService: LocalStorageService
  ) {
    this.searchform = this.formBuilder.group({
      searchInput: "",
    });
  }

  keyDownFunction(event) {
    if (event.keyCode == 13 && !this.listsearch) {
      this.triggerSearch.next(new Date());
      this.returnPressed.next(new Date());
    }
  }

  onChange() {
    if (!(this.listsearch || this.enableListSearchOnly)) {
      this.doFreetextSearch(this.searchform.value.searchInput);
    }

    if (this.listsearch) {
      this.doListSearch(this.searchform.value.searchInput);
    }
  }

  doListSearch(value) {
    this.clearCategorySearch.next(Date.now);
    if (value) {
      this.localstorageListsearchEntry.value = value;
    }
    if (this.enableTemplating) {
      let uriParams = { q: value };
      let link = uriTemplates(this.inputLink).fill(uriParams);
      this.uri.next(link);
    } else {
      this.uri.next(value);
    }
  }

  doFreetextSearch(value) {
    this.clearCategorySearch.next(Date.now);
    this.localstorageSearchEntry.value = value;
    if (this.enableTemplating) {
      let uriParams = { q: value };
      let link = uriTemplates(this.inputLink).fill(uriParams);
      this.uri.next(link);
    } else {
      this.uri.next(value);
    }
  }

  toggleMode($event) {
    if ($event.checked) {
      this.switchToListSearch();
    } else {
      this.switchToFreetextSearch();
    }
  }

  private switchToFreetextSearch() {
    this.listsearch = false;
    this.localstorageIsListSearchEntry.value = "false";
    this.infotext = this.configuration.configuration["infoText"];
    this.title = this.configuration.configuration["title"];
    this.resetFromLocalStorage(this.localstorageSearchEntry);
  }

  private switchToListSearch() {
    this.listsearch = true;
    this.localstorageIsListSearchEntry.value = "true";
    this.infotext = this.configuration.configuration["infoText-listsearch"];
    this.title = this.configuration.configuration["title-listsearch"];
    this.resetFromLocalStorage(this.localstorageListsearchEntry);
  }

  resetFromLocalStorage(storageKeyEntry: LocalStorageEntry) {
    let value = storageKeyEntry.value;
    this.storageValue.next(value);
    this.updateTextField(value);
  }

  private updateTextField(value: string) {
    this.searchform.setValue({
      searchInput: value || "",
    });

    window.setTimeout(() => {
      this.searchform.patchValue({
        searchInput: value || "",
      });
    }, 1);
  }

  doSearch(value) {
    this.updateTextField(value);
    if (this.listsearch || this.enableListSearchOnly) {
      this.doListSearch(value);
    } else {
      this.doFreetextSearch(value);
    }
  }

  @WidgetConfigure()
  protected configureWidget(configuration: WidgetConfig) {
    this.enableListsearch = this.configuration.configuration[
      "enableListsearch"
    ];
    this.enableListSearchOnly = this.configuration.configuration[
      "enableListSearchOnly"
    ];
    if (this.configuration.configuration["enableTemplating"] != undefined) {
      this.enableTemplating = this.configuration.configuration[
        "enableTemplating"
      ];
    }
    this.wikiLink = this.configuration.configuration["wikiLink"];
    this.inputLink = this.configuration.configuration["links"]["search"];
    this.inputLinklistSearch = this.configuration.configuration["links"][
      "listSearch"
    ];

    this.localstorageSearchEntry = this.localStorageService.getLocalStorageEntry(
      this.configuration.configuration["scope"] +
        this.configuration.configuration["localstorage-search"],
      Scope.GLOBAL,
      DeletionMode.LOGIN
    );

    this.localstorageListsearchEntry = this.localStorageService.getLocalStorageEntry(
      this.configuration.configuration["scope"] +
        this.configuration.configuration["localstorage-listsearch"],
      Scope.GLOBAL,
      DeletionMode.LOGIN
    );

    this.localstorageIsListSearchEntry = this.localStorageService.getLocalStorageEntry(
      this.configuration.configuration["scope"] + "nm-product-listsearch",
      Scope.GLOBAL,
      DeletionMode.LOGIN
    );
    this.placeholderkey = this.configuration.configuration["placeholderkey"]
      ? this.configuration.configuration["placeholderkey"]
      : "elasticsearch.search.paceholder";

    if (
      this.localstorageIsListSearchEntry.exists() &&
      (this.enableListsearch || this.enableListSearchOnly)
    ) {
      this.listsearch =
        this.localstorageIsListSearchEntry.value === "true" ? true : false;
    }

    if (this.listsearch || this.enableListSearchOnly) {
      this.switchToListSearch();
    } else {
      this.switchToFreetextSearch();
    }

    this.resetChannel.asObservable().subscribe((reset) => {
      this.localstorageSearchEntry.clear();
      this.localstorageListsearchEntry.clear();
      this.doSearch("");
    });

    this.clearChannel.asObservable().subscribe((reset) => {
      this.localstorageSearchEntry.clear();
      this.localstorageListsearchEntry.clear();
      this.updateTextField("");
    });
  }

  public ngOnInit() {
    observableCombineLatest(
      this.storageValue,
      this.inputChannel,
      (storage, input) => {
        if (input) {
          return input;
        }

        return storage;
      }
    )
      .pipe(
        filter((value) => value),
        distinctUntilChanged()
      )
      .subscribe((value) => this.doSearch(value));
  }
}