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

import { distinctUntilChanged, filter } from "rxjs/operators";
import {
  AfterViewInit,
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  OnInit,
  ViewChild,
} 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_;

export interface HistorySearchConfiguration {
  /**
   * Disables the search when the input search field is empty @default(false)
   */
  disableSearchOnEmptyField?: boolean;

  /**
   * Sets CSS class name for the embedded header component
   */
  header: string;

  /**
   * Sets the text of the dialog displayed when clicking the info icon
   */
  infoText: string;

  /**
   * Sets the width size of the help icon tooltip
   */
  infoWidth: string;

  /**
   * Sets the height size of the help icon tooltip
   */
  infoHeight: string;

  /**
   * Sets the title of the dialog displayed when clicking the info icon
   */
  infoTitle: string;

  /**
   * Sets the title shown in the widget header
   */
  title: string;

  /**
   * Sets the link to external wiki system for more information
   */
  wikiLink: string;

  /**
   * Defines the links object which contains the "search" link, used by the "uri" widget output to fill it with the current search url
   */
  links: { search: string };

  /**
   * Sets the local storage entry key for the search input (concatenated with the "scope" configuration field value)
   */
  "localstorage-search": string;

  /**
   * Sets the local storage entry key for the search input (concatenated with the "localstorage-search" configuration field value)
   */
  scope: string;

  /**
   * Sets the text displayed as a place holder in the "search term" input field
   */
  "placeholder-search-input": string;

  /**
   * Sets the text displayed as a place holder in the "no of months" input field
   */
  "placeholder-no-of-months": string;

  /**
   * Sets the default no of months used for search if nothing is defined @default("6")
   */
  "default-no-of-months"?: string;
}

@WidgetComponent("nm-history-search")
@Component({
  selector: "nm-history-search",
  templateUrl: "./search.component.html",
  styleUrls: ["./search.component.scss"],

  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HistorySearchWidgetComponent implements AfterViewInit, OnInit {
  public cols: any[];
  private attributes: any;
  public inputLink: string;
  public wikiLink: string;
  public infotext: string;
  public infoWidth: string;
  public infoHeight: string;
  public title: string;
  public inputLinklistSearch: string;
  public placeholderSearchInput: string;
  public placeholderNoOfMonths: string;
  public disableSearchOnEmptyField: boolean = false;
  private encodeLink: boolean = true;

  private localStorageSearchEntry: LocalStorageEntry;

  @WidgetConfiguration()
  public configuration: WidgetConfig<HistorySearchConfiguration>;

  /**
   *  If templating is enabled emits the url that can be used to fetch the list-search data (if in list-search mode), else uses inputLink and fills it with the current search
   */
  @WidgetOutput("uri")
  private uri: Subject<any> = new ReplaySubject<any>(1);

  /**
   * Sets the value of the search-field and performs a search
   */
  @WidgetInput("set")
  private inputChannel: Subject<any> = new BehaviorSubject<any>(null);

  /**
   * Clears the value of the search-field and resets the search
   */
  @WidgetInput("clear")
  private clearChannel: Subject<any> = new Subject<any>();

  /**
   * Emits the value of the search term
   */
  @WidgetOutput("searchTerm")
  private searchTerm: Subject<any> = new Subject<any>();

  /**
   * Emits when search is reset
   */
  @WidgetOutput("reset")
  public resetOutput: Subject<any> = new Subject<any>();

  /**
   * Saves the search term in the local storage
   */
  @WidgetInput("saveSearchTerm")
  private saveSearchTerm: Subject<any> = new Subject<any>();

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

  @WidgetId()
  public _id: string;

  @ViewChild("inputComponent") inputComponent;
  // @ViewChildren('inputComponentMonths') inputComponentMonths;

  private sub;
  public searchform: FormGroup;

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

  search() {
    let search = {
      searchInput: this.searchform.value.searchInput,
      noOfMonths: this.searchform.value.noOfMonths,
    };
    this.doFreetextSearch(search);
    this._changeDetectorRef.markForCheck();
  }

  onChange(event) {
    this.searchTerm.next(this.searchform.value.searchInput);
  }

  doFreetextSearch(value) {
    if (this.localStorageSearchEntry) {
      this.localStorageSearchEntry.value = JSON.stringify(value);
    }
    if (!(this.disableSearchOnEmptyField && value.length === 0)) {
      this.uri.next(value);
    }
    this._changeDetectorRef.markForCheck();
  }

  resetFromLocalStorage(entry: LocalStorageEntry) {
    if (entry.exists()) {
      let value = JSON.parse(entry.value);
      //this.storageValue.next(value);
      this.updateTextField(value.searchInput, value.noOfMonths);
    }
  }

  clear() {
    if (this.localStorageSearchEntry) {
      this.localStorageSearchEntry.clear();
    }
    this.updateTextField("", null);
    this.resetOutput.next();
    this._changeDetectorRef.markForCheck();
  }

  private updateTextField(value: string, noOfMonths: string) {
    this.searchform.setValue({
      searchInput: value || "",
      noOfMonths:
        noOfMonths ||
        this.configuration.configuration["default-no-of-months"] ||
        "6",
    });

    window.setTimeout(() => {
      this.searchform.patchValue({
        searchInput: value || "",
        noOfMonths:
          noOfMonths ||
          this.configuration.configuration["default-no-of-months"] ||
          "6",
      });

      this._changeDetectorRef.markForCheck();
    }, 1);
  }

  doSearch(value) {
    this.doFreetextSearch(value);
  }

  @WidgetConfigure()
  protected configureWidget(
    configuration: WidgetConfig<HistorySearchConfiguration>
  ) {
    this.disableSearchOnEmptyField = this.configuration.configuration.disableSearchOnEmptyField;
    this.wikiLink = this.configuration.configuration.wikiLink;
    if (this.configuration.configuration.links) {
      this.inputLink = this.configuration.configuration.links.search;
    }
    if (this.configuration.configuration["localstorage-search"]) {
      this.localStorageSearchEntry = this.localStorageService.getLocalStorageEntry(
        this.configuration.configuration.scope +
          this.configuration.configuration["localstorage-search"],
        Scope.GLOBAL,
        DeletionMode.RESET
      );
    }

    this.placeholderSearchInput = this.configuration.configuration[
      "placeholder-search-input"
    ];
    this.placeholderNoOfMonths = this.configuration.configuration[
      "placeholder-no-of-months"
    ];

    this.updateTextField("", null);

    this.infotext = this.configuration.configuration.infoText;
    this.title = this.configuration.configuration.title;
    this.infoWidth = this.configuration.configuration.infoWidth;
    this.infoHeight = this.configuration.configuration.infoHeight;
    this.resetFromLocalStorage(this.localStorageSearchEntry);

    this.clearChannel.asObservable().subscribe((reset) => {
      this.clear();
    });

    this.saveSearchTerm.asObservable().subscribe((save) => {
      this.localStorageSearchEntry.value = this.searchform.value.searchInput;
    });
  }

  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);
      });
  }

  ngAfterViewInit() {
    this.searchTerm.next(this.searchform.value.searchInput);
    if (this.inputComponent.first != undefined) {
      setTimeout(() => {
        this.inputComponent.first.nativeElement.focus();
        this._changeDetectorRef.markForCheck();
      }, 1);
    }
  }

  ngAfterViewChecked() {
    this._changeDetectorRef.markForCheck();
  }
}