import { EditAttributeService } from "../../../components/edit-attribute/edit-attribute.service";
import {
  Component,
  EventEmitter,
  Input,
  OnInit,
  OnDestroy,
  Output,
} from "@angular/core";
import { FormEventPayload } from "../advanced/search-advanced.component";
import { FormControl, FormGroup } from "@angular/forms";
import { filter, take, takeUntil } from "rxjs/operators";
import { NgUnsubscribe } from "../../../ng-unsubscribe";
import { ReplaySubject, Subject } from "rxjs";
import { MatDialog, MatDialogRef } from "@angular/material/dialog";
import { SearchFavoritesDialogComponent } from "./dialog/search-favorites-dialog.component";
import { WidgetframeService } from "../../widgetframe/widgetframe.service";
import { DialogService } from "../../../../shared/components/dialog/dialog.service";

export interface Template {
  identifier: string;
  text: string;
}

@Component({
  selector: "nm-search-favorites",
  templateUrl: "./search-favorites.component.html",
  styleUrls: ["./search-favorites.component.scss"],
  providers: [EditAttributeService],
})
export class SearchFavoritesComponent implements OnInit, OnDestroy {
  @Input() public reset = new Subject();
  @Input() public currentLocale;
  @Input() public searchTemplatesUri;
  @Input() public placeholder = "table.head.searchfavorite";
  @Input() public data: any = new Subject();
  @Output() public template = new EventEmitter<any>();
  @Output() public reloadLookups = new EventEmitter<any>();
  @Input() public listsearch: boolean = false;
  @Input() public enableRoleBasedSearchTemplates: boolean = false;

  public form;

  public filteredTemplates;
  public templates: Template[];
  public value;
  private resentChanged: boolean;
  private formData: any = {};
  private unsubscribe = NgUnsubscribe.create();
  public filterCtrl: FormControl = new FormControl();

  constructor(
    private dialogService: DialogService,
    private widgetframeService: WidgetframeService
  ) {}

  private loadSearchFavorites() {
    this.widgetframeService
      .getData(this.searchTemplatesUri)
      .subscribe((value) => {
        this.templates = value._embedded.templates;
        this.filterTemplates();
      });
  }

  ngOnInit(): void {
    this.reloadLookups
      .pipe(takeUntil(this.unsubscribe))
      .subscribe(() => this.loadSearchFavorites());
    this.data.pipe(takeUntil(this.unsubscribe)).subscribe((data) => {
      this.formData = data;
    });

    this.filterCtrl.valueChanges
      .pipe(takeUntil(this.unsubscribe))
      .subscribe(() => this.filterTemplates());

    this.loadSearchFavorites();

    this.form = new FormGroup({
      searchfavorites: new FormControl(""),
    });

    this.form.valueChanges
      .asObservable()
      .pipe(takeUntil(this.unsubscribe))
      .subscribe(() => {
        this.resentChanged = true;
      });

    this.reset
      .pipe(takeUntil(this.unsubscribe))
      .subscribe(() => this.resetSelect());
  }

  private filterTemplates() {
    if (!this.filterCtrl.value) {
      this.filteredTemplates = this.templates;
      return;
    }
    this.filteredTemplates = this.templates.filter(
      (entry) =>
        entry.text
          .toLowerCase()
          .indexOf(this.filterCtrl.value.toLowerCase()) !== -1
    );
  }

  onInputEvent($event: FormEventPayload) {}

  edit() {
    let dialogRef = this.dialogService.open(SearchFavoritesDialogComponent, {
      autoFocus: true,
      minWidth: "800px",
      height: "760px",
    });

    dialogRef.componentInstance.searchTemplatesUri = this.searchTemplatesUri;
    dialogRef.componentInstance.formData = this.formData;
    dialogRef.componentInstance.isListSearch = this.listsearch;
    dialogRef.componentInstance.hasCreateRoleBasedTemplate = this.enableRoleBasedSearchTemplates;
    dialogRef.componentInstance.dialogService = this.dialogService;

    // dialogRef.componentInstance['selectedFavorite'] = selectedFavorite
    // dialogRef.componentInstance.infoText = "infoText.search.favorites";
    dialogRef.componentInstance.onFavoriteChange.subscribe((data) => {
      this.reloadLookups.emit(["searchfavorites"]);
    });
  }

  ngOnDestroy(): void {
    this.unsubscribe.destroy();
  }

  public resetSelect() {
    if (!this.resentChanged) {
      this.value = null;
      this.form.patchValue({ searchfavorites: null });
    }
  }

  valueChanged() {
    if (this.value) {
      this.widgetframeService
        .getData(this.searchTemplatesUri + "/" + this.value)
        .subscribe((template) => {
          this.template.emit(template);
          this.resentChanged = false;
        });
    }
  }
}