import { Component, OnInit, OnDestroy } from '@angular/core';
import { HttpHeaders, HttpResponse } from '@angular/common/http';
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';
import { JhiEventManager, JhiParseLinks } from 'ng-jhipster';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

import { IUserWatchList } from 'app/shared/model/user-watch-list.model';

import { ITEMS_PER_PAGE } from 'app/shared/constants/pagination.constants';
import { UserWatchListService } from 'app/entities/user-watch-list/user-watch-list.service';
import { UserWatchListDeleteDialogComponent } from './user-watch-list-delete-dialog.component';


@Component({
  selector: 'jhi-bookmarks',
  templateUrl: './bookmarks.component.html',
})
export class BookmarkComponent implements OnInit, OnDestroy {
  userWatchLists: IUserWatchList[];
  eventSubscriber?: Subscription;
  itemsPerPage: number;
  links: any;
  page: number;
  predicate: string;
  ascending: boolean;
  currentSearch: string;

  constructor(
    protected userWatchListService: UserWatchListService,
    protected eventManager: JhiEventManager,
    protected modalService: NgbModal,
    protected parseLinks: JhiParseLinks,
    protected activatedRoute: ActivatedRoute
  ) {
    this.userWatchLists = [];
    this.itemsPerPage = ITEMS_PER_PAGE;
    this.page = 0;
    this.links = {
      last: 0,
    };
    this.predicate = 'id';
    this.ascending = true;
    this.currentSearch =
      this.activatedRoute.snapshot && this.activatedRoute.snapshot.queryParams['search']
        ? this.activatedRoute.snapshot.queryParams['search']
        : '';
  }

  loadAll(): void {
    if (this.currentSearch) {
      this.userWatchListService
        .search({
          query: this.currentSearch,
          page: this.page,
          size: this.itemsPerPage,
          sort: this.sort(),
        })
        .subscribe((res: HttpResponse<IUserWatchList[]>) => this.paginateUserWatchLists(res.body, res.headers));
      return;
    }

    this.userWatchListService
      .query({
        page: this.page,
        size: this.itemsPerPage,
        sort: this.sort(),
      })
      .subscribe((res: HttpResponse<IUserWatchList[]>) => this.paginateUserWatchLists(res.body, res.headers));
  }

  reset(): void {
    this.page = 0;
    this.userWatchLists = [];
    this.loadAll();
  }

  loadPage(page: number): void {
    this.page = page;
    this.loadAll();
  }

  search(query: string): void {
    this.userWatchLists = [];
    this.links = {
      last: 0,
    };
    this.page = 0;
    if (query) {
      this.predicate = '_score';
      this.ascending = false;
    } else {
      this.predicate = 'id';
      this.ascending = true;
    }
    this.currentSearch = query;
    this.loadAll();
  }

  ngOnInit(): void {
    this.loadAll();
    this.registerChangeInUserWatchLists();
  }

  ngOnDestroy(): void {
    if (this.eventSubscriber) {
      this.eventManager.destroy(this.eventSubscriber);
    }
  }

  trackId(index: number, item: IUserWatchList): number {
    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
    return item.id!;
  }

  registerChangeInUserWatchLists(): void {
    this.eventSubscriber = this.eventManager.subscribe('userWatchListListModification', () => this.reset());
  }

  delete(userWatchList: IUserWatchList): void {
    const modalRef = this.modalService.open(UserWatchListDeleteDialogComponent, { size: 'lg', backdrop: 'static' });
    modalRef.componentInstance.userWatchList = userWatchList;
  }

  sort(): string[] {
    const result = [this.predicate + ',' + (this.ascending ? 'asc' : 'desc')];
    if (this.predicate !== 'id') {
      result.push('id');
    }
    return result;
  }

  protected paginateUserWatchLists(data: IUserWatchList[] | null, headers: HttpHeaders): void {
    const headersLink = headers.get('link');
    this.links = this.parseLinks.parse(headersLink ? headersLink : '');
    if (data) {
      for (let i = 0; i < data.length; i++) {
        this.userWatchLists.push(data[i]);
      }
    }
  }
}