import { Component, ChangeDetectionStrategy, OnDestroy, Output, EventEmitter } from '@angular/core';
import { UiFilter } from '@ui/filter';
import { of, Subject } from 'rxjs';
import { map } from 'rxjs/operators';
import { RemissionListComponentStore } from '../remission-list.component-store';

@Component({
  selector: 'page-remission-filter',
  templateUrl: 'remission-filter.component.html',
  styleUrls: ['remission-filter.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class RemissionFilterComponent implements OnDestroy {
  @Output()
  close = new EventEmitter();

  filter$ = this.store.filter$.pipe(map((filter) => UiFilter.create(filter)));

  private _onDestroy$ = new Subject();

  constructor(public store: RemissionListComponentStore) {}

  ngOnDestroy() {
    this._onDestroy$.next();
    this._onDestroy$.complete();
  }

  applyFilter(filter: UiFilter) {
    this.store.applyFilter(filter);
    this.close.emit();
  }

  resetFilter() {
    this.store.loadFilter();
  }
}
